【CSS】position: sticky; 応用編。 tableのセルに使用すると、セルを固定表示できる！

今回は前回の予告通り、「position: sticky;」を<table>に適用させてみたいと思います。

.table-sticky table tr:first-child th {
   position: sticky;
   top: 0;
   z-index: 2;
}
.table-sticky table tr th:first-child {
   position: sticky;
   left: 0;
   z-index: 2;
}
.table-sticky table tr:first-child th:first-child {
   z-index: 3;
}

こんな感じです。

1つ目のCSSは、
「最初の行の<th>のみに、position: sticky; top:0; を適用」
（上に固定）

2つ目のCSSは、
「左の1列目の<th>のみに、position: sticky; left:0; を適用」
（左端で固定）

3つ目のCSSは、
「左上の<th>のみに、z-index:3; を適用」
（表示のプライオリティーを一番上に持ってきたいので）

こんな感じです。

↓↓↓↓↓ それでは、サンプルをご覧ください。

https://revenue-test.biz/test_html/position-sticky-table.html

すごいですよね！
個人的には、これが理想のtableだと思います。
HTMLでは、position:sticky; が現れるまで、見出しセルの固定はできませんでした。
ですが、これが使用できるようになって、とても見やすいtableになったと思います。・・・小さいtableなら必要はないんですが、大きいものになると、こんな風にセルを固定できるのが本当にありがたいですよね。

position:sticky; が現れるまでは、
「HTMLの<table>ってこんなものだからしょうがない」
とあきらめるか、
<table>外に別のオブジェクトを組んで、セルの幅に強引に合わせて固定しているように見せかける、などの手法がとられていました。
が、今では…このCSSの登場により、セルの幅を気にすることなく、見出しセルの固定が可能になったわけです。

position:sticky; 、まだまだ可能性がありそうですね。
便利な使い方を発見しましたら、またご報告させていただきたいと思います。