問題 × 解決策

「position: sticky」で固定したテーブルのセルのボーダーが消える場合の対処法

問題

「position: sticky」で固定したテーブルのセルのボーダーがスクロールすると消えてしまう。

解決策

大元のテーブルに「border-collspace: separate;」を設定する。

 

「position: sticky」に対処する。

固定したいテーブルのセルに「position: sticky」を指定すると、そのセルのボーダーがスクロールで消えてしまいます。
「position: sticky」で固定したテーブルのセルのボーダーが消える場合の対処法をご紹介します。

「position: sticky」を使うと、セルを固定することができます。
詳しくは過去の記事で紹介していますので、ご覧ください。
テーブルの左列を固定にする方法【position: sticky】

DEMOはこちら

対処をしていないテーブル

← 横スクロールしてご覧ください →

項目 項目2 内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
項目 内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
項目 項目2 内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。

対処をしたテーブル

← 横スクロールしてご覧ください →

項目 項目2 内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
項目 内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
項目 項目2 内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。

CSSはこちら

テーブルに対し、「border-collapse: separate;」と設定することで、ボーダーが正常に表示されるようになります。


.twrapper table .fixcell {
	position: -webkit-sticky;
	position: sticky;
	left: 60px;
	width: 60px;
	min-width: 60px;
	max-width: 60px;
}
.twrapper table .fixcell:first-child {
	left: 0;
}
.twrapper table .fixcell[colspan="2"] {
	width: 120px;
	min-width: 120px;
	max-width: 120px;
	left: 0;
}.twrapper{
	overflow: auto;
	white-space: nowrap;
}
.twrapper table{
	width: auto;
	border-collapse: separate;
}
.twrapper table th,
.twrapper table td {
	min-width: 60px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
.twrapper table .fixcell {
	position: -webkit-sticky;
	position: sticky;
	left: 0;
	width: 60px;
	min-width: 60px;
	max-width: 60px;
}

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

six + 16 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧