問題
「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;
}
コメント