tableの項目を固定したのですが、線が消えちゃいますー
ちょっとした工夫が必要ですねー
tableの『行』を固定してスクロールする（失敗作）
See the Pen 【CSS】テーブル（table）の行を固定してスクロールする（失敗作） by 125naroom (@125naroom) on CodePen.
HTMLとCSSはこちら
HTML
<table>
<tr>
<th class="_sticky">固定くん</th>
<th class="_sticky">固定くん</th>
<th class="_sticky">固定くん</th>
</tr>
<tr>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
</table>
CSS
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
th, td {
vertical-align: middle;
padding: 20px;
border: 1px solid #f00;
color: #000;
font-size: 14px;
text-align: center;
white-space: nowrap;
}
th {
background: #ffeb3b;
}
td {
background: #fff;
}
._sticky {
position: sticky;
top: 0;
left: 0;
}
tableの『行』を固定してスクロールする
before（擬似要素）を使ってスクロール時の枠線の補助をしています。
See the Pen 【CSS】テーブル（table）の行を固定してスクロールする by 125naroom (@125naroom) on CodePen.
HTMLとCSSはこちら
HTML
<table>
<tr>
<th class="_sticky">固定くん</th>
<th class="_sticky">固定くん</th>
<th class="_sticky">固定くん</th>
</tr>
<tr>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
</table>
CSS
._sticky:before（擬似要素）を使ってスクロール時の枠線の補助をしています。
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
th, td {
vertical-align: middle;
padding: 20px;
border: 1px solid #f00;
color: #000;
font-size: 14px;
text-align: center;
white-space: nowrap;
}
th {
background: #795548;
}
td {
background: #fff;
}
._sticky {
position: sticky;
top: 0;
left: 0;
background: none;
border-top: none;
border-bottom: none;
}
._sticky:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-top: 1px solid #f00;
border-bottom: 1px solid #f00;
background: #ffeb3b;
z-index: -1;
}
tableの『列』を固定してスクロールする（失敗作）
See the Pen 【CSS】テーブル（table）の列を固定してスクロールする（失敗作） by 125naroom (@125naroom) on CodePen.
HTMLとCSSはこちら
HTML
<div class="scroll-box">
<table>
<tr>
<th class="_sticky">固定くん</th>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<th class="_sticky">固定くん</th>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<th class="_sticky">固定くん</th>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
</table>
</div>
CSS
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
th, td {
vertical-align: middle;
padding: 20px;
border: 1px solid #f00;
color: #000;
font-size: 14px;
text-align: center;
white-space: nowrap;
}
th {
background: #ffeb3b;
}
td {
background: #fff;
}
._sticky {
position: sticky;
top: 0;
left: 0;
}
tableの『列』を固定してスクロールする
before（擬似要素）を使ってスクロール時の枠線の補助をしています。
See the Pen 【CSS】テーブル（table）の列を固定してスクロールする by 125naroom (@125naroom) on CodePen.
HTMLとCSSはこちら
HTML
<div class="scroll-box">
<table>
<tr>
<th class="_sticky">固定くん</th>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<th class="_sticky">固定くん</th>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<th class="_sticky">固定くん</th>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
</table>
</div>
CSS
._sticky:before（擬似要素）を使ってスクロール時の枠線の補助をしています。
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
th, td {
vertical-align: middle;
padding: 20px;
border: 1px solid #f00;
color: #000;
font-size: 14px;
text-align: center;
white-space: nowrap;
}
th {
background: #795548;
}
td {
background: #fff;
}
._sticky {
position: sticky;
top: 0;
left: 0;
background: none;
border-top: none;
border-bottom: none;
}
._sticky:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-top: 1px solid #f00;
border-bottom: 1px solid #f00;
background: #ffeb3b;
z-index: -1;
}
tableの『行と列』を固定してスクロールする（失敗作）
See the Pen 【CSS】テーブル（table）の行と列を固定してスクロールする（失敗作） by 125naroom (@125naroom) on CodePen.
HTMLとCSSはこちら
HTML
<div class="scroll-box">
<table>
<tr>
<th class="_sticky_ab">固定くん</th>
<th class="_sticky_b">固定くん</th>
<th class="_sticky_b">固定くん</th>
<th class="_sticky_b">固定くん</th>
<th class="_sticky_b">固定くん</th>
<th class="_sticky_b">固定くん</th>
<th class="_sticky_b">固定くん</th>
<th class="_sticky_b">固定くん</th>
<th class="_sticky_b">固定くん</th>
</tr>
<tr>
<th class="_sticky_a">固定くん</th>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<th class="_sticky_a">固定くん</th>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<th class="_sticky_a">固定くん</th>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<th class="_sticky_a">固定くん</th>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<th class="_sticky_a">固定くん</th>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<th class="_sticky_a">固定くん</th>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
</table>
</div>
CSS
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
th, td {
vertical-align: middle;
padding: 20px;
border: 1px solid #f00;
color: #000;
font-size: 14px;
text-align: center;
white-space: nowrap;
}
th {
background: #ffeb3b;
}
td {
background: #fff;
}
._sticky_a {
position: sticky;
top: 0;
left: 0;
}
._sticky_a:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
._sticky_b {
position: sticky;
top: 0;
left: 0;
}
._sticky_b:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
._sticky_ab {
position: sticky;
top: 0;
left: 0;
z-index: 1;
}
._sticky_ab:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
tableの『行と列』を固定してスクロールする
before（擬似要素）を使ってスクロール時の枠線の補助をしています。
See the Pen 【CSS】テーブル（table）の行と列を固定してスクロールする by 125naroom (@125naroom) on CodePen.
HTMLとCSSはこちら
HTML
<div class="scroll-box">
<table>
<tr>
<th class="_sticky_ab">固定くん</th>
<th class="_sticky_b">固定くん</th>
<th class="_sticky_b">固定くん</th>
<th class="_sticky_b">固定くん</th>
<th class="_sticky_b">固定くん</th>
<th class="_sticky_b">固定くん</th>
<th class="_sticky_b">固定くん</th>
<th class="_sticky_b">固定くん</th>
<th class="_sticky_b">固定くん</th>
</tr>
<tr>
<th class="_sticky_a">固定くん</th>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<th class="_sticky_a">固定くん</th>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<th class="_sticky_a">固定くん</th>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<th class="_sticky_a">固定くん</th>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<th class="_sticky_a">固定くん</th>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<th class="_sticky_a">固定くん</th>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
</table>
</div>
CSS
._sticky:before（擬似要素）を使ってスクロール時の枠線の補助をしています。
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
th, td {
vertical-align: middle;
padding: 20px;
border: 1px solid #f00;
color: #000;
font-size: 14px;
text-align: center;
white-space: nowrap;
}
th {
background: #795548;
}
td {
background: #fff;
}
._sticky_a {
position: sticky;
top: 0;
left: 0;
background: none;
border-left: none;
border-right: none;
}
._sticky_a:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-left: 1px solid #f00;
border-right: 1px solid #f00;
background: #ffeb3b;
z-index: -1;
}
._sticky_b {
position: sticky;
top: 0;
left: 0;
background: none;
border-top: none;
border-bottom: none;
}
._sticky_b:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-top: 1px solid #f00;
border-bottom: 1px solid #f00;
background: #ffeb3b;
z-index: -1;
}
._sticky_ab {
position: sticky;
top: 0;
left: 0;
background: none;
border-top: none;
border-bottom: none;
border-left: none;
border-right: none;
z-index: 1;
}
._sticky_ab:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-top: 1px solid #f00;
border-bottom: 1px solid #f00;
border-left: 1px solid #f00;
border-right: 1px solid #f00;
background: #ffeb3b;
z-index: -1;
}
tableの『列』を固定してスクロールする（separateを使ってみる、線が太くなってしまう）
『border-collapse: collapse;』を『border-collapse: separate;』にしてみます。
separateを使うと擬似要素も使わなくていいので一気に問題解決だ！と思いきや、border（線）が太くなってしまうのです。collapseとseparateの差ですね。
See the Pen 【CSS】テーブル（table）の列を固定してスクロールする（separateを使ってみる、線が太くなってしまう） by 125naroom (@125naroom) on CodePen.
HTMLとCSSはこちら
HTML
<div class="scroll-box">
<table class="a">
<tr>
<th class="_sticky">固定くん</th>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<th class="_sticky">固定くん</th>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<th class="_sticky">固定くん</th>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
</table>
</div>
CSS
table.a {
border-collapse: separate;
border-spacing: 0;
width: 100%;
}
table.a th, table.a td {
vertical-align: middle;
padding: 20px;
border: 1px solid #f00;
color: #000;
font-size: 14px;
text-align: center;
white-space: nowrap;
}
table.a th {
background: #ffeb3b;
}
table.a td {
background: #fff;
}
table.a ._sticky {
position: sticky;
top: 0;
left: 0;
}
tableの『列』を固定してスクロールする（separateを使ってみる、thとtdをborderで調整する、少し面倒だったりする）
tableのthとtdのborderを上と右と左と下で設定していく感じですね。これもいいのですが、ちょっと面倒なので個人的にはあまり使わないですね。
See the Pen 【CSS】テーブル（table）の列を固定してスクロールする（separateを使ってみる、thとtdをborderで調整する、少し面倒だったりする） by 125naroom (@125naroom) on CodePen.
HTMLとCSSはこちら
HTML
<div class="scroll-box">
<table class="b">
<tr>
<th class="_sticky">固定くん</th>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<th class="_sticky">固定くん</th>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<th class="_sticky">固定くん</th>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
</table>
</div>
CSS
table.b {
border-collapse: separate;
border-spacing: 0;
width: 100%;
}
table.b th, table.b td {
vertical-align: middle;
padding: 20px;
border-right:1px solid #f00;
border-bottom:1px solid #f00;
color: #000;
font-size: 14px;
text-align: center;
white-space: nowrap;
}
table.b th {
background: #ffeb3b;
}
table.b td {
background: #fff;
}
table.b ._sticky {
position: sticky;
top: 0;
left: 0;
}
table.b tr:first-child th, table.b tr:first-child td {
border-top:1px solid #f00;
}
table.b th:first-child, table.b td:first-child {
border-left:1px solid #f00;
}
制作メモ
2023年2月現在、ベンダープレフィックスは不要で問題ないです。
ベンダープレフィックスが必要なものも少なくなってきましたね。
対応ブラウザ
『position: sticky;』の対応ブラウザは下記サイトで確認できます。
IE対応は必要ないので、stickyは問題なく使えますね。
IE対応をする場合は『Polyfill』を使えば問題なし
なぜだかわからないけどIE対応してほしいと依頼があった場合は『Polyfill』を使いましょう。
まずは『Polyfill』に必要なファイルを下記サイトからダウンロードします。
ダウンロードファイルの中で必要なファイルは以下の1点です。
- stickyfill.min.js
HTML
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/stickyfill.min.js"></script>
JS
$(function() {
var elements = document.querySelectorAll('.sticky');
Stickyfill.add(elements);
});
さいごに
おー、すごーい
ちょっとした工夫が楽しいですねー
