このように、tableの<th>セルに「position: sticky;」を適用させるとどうなるか…
下のテーブルをスクロールさせてみてください。
| head0 | head1 | head2 | head3 | head4 | head5 | head6 | head7 | head8 | head9 | head10 | head11 | head12 | head13 | head14 | head15 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 見出し1 | cell-1-1 | cell-1-2 | cell-1-3 | cell-1-4 | cell-1-5 | cell-1-6 | cell-1-7 | cell-1-8 | cell-1-9 | cell-1-10 | cell-1-11 | cell-1-12 | cell-1-13 | cell-1-14 | cell-1-15 |
| 見出し2 | cell-2-1 | cell-2-2 | cell-2-3 | cell-2-4 | cell-2-5 | cell-2-6 | cell-2-7 | cell-2-8 | cell-2-9 | cell-2-10 | cell-2-11 | cell-2-12 | cell-2-13 | cell-2-14 | cell-2-15 |
| 見出し3 | cell-3-1 | cell-3-2 | cell-3-3 | cell-3-4 | cell-3-5 | cell-3-6 | cell-3-7 | cell-3-8 | cell-3-9 | cell-3-10 | cell-3-11 | cell-3-12 | cell-3-13 | cell-3-14 | cell-3-15 |
| 見出し4 | cell-4-1 | cell-4-2 | cell-4-3 | cell-4-4 | cell-4-5 | cell-4-6 | cell-4-7 | cell-4-8 | cell-4-9 | cell-4-10 | cell-4-11 | cell-4-12 | cell-4-13 | cell-4-14 | cell-4-15 |
| 見出し5 | cell-5-1 | cell-5-2 | cell-5-3 | cell-5-4 | cell-5-5 | cell-5-6 | cell-5-7 | cell-5-8 | cell-5-9 | cell-5-10 | cell-5-11 | cell-5-12 | cell-5-13 | cell-5-14 | cell-5-15 |
| 見出し6 | cell-6-1 | cell-6-2 | cell-6-3 | cell-6-4 | cell-6-5 | cell-6-6 | cell-6-7 | cell-6-8 | cell-6-9 | cell-6-10 | cell-6-11 | cell-6-12 | cell-6-13 | cell-6-14 | cell-6-15 |
| 見出し7 | cell-7-1 | cell-7-2 | cell-7-3 | cell-7-4 | cell-7-5 | cell-7-6 | cell-7-7 | cell-7-8 | cell-7-9 | cell-7-10 | cell-7-11 | cell-7-12 | cell-7-13 | cell-7-14 | cell-7-15 |
| 見出し8 | cell-8-1 | cell-8-2 | cell-8-3 | cell-8-4 | cell-8-5 | cell-8-6 | cell-8-7 | cell-8-8 | cell-8-9 | cell-8-10 | cell-8-11 | cell-8-12 | cell-8-13 | cell-8-14 | cell-8-15 |
| 見出し9 | cell-9-1 | cell-9-2 | cell-9-3 | cell-9-4 | cell-9-5 | cell-9-6 | cell-9-7 | cell-9-8 | cell-9-9 | cell-9-10 | cell-9-11 | cell-9-12 | cell-9-13 | cell-9-14 | cell-9-15 |
| 見出し10 | cell-10-1 | cell-10-2 | cell-10-3 | cell-10-4 | cell-10-5 | cell-10-6 | cell-10-7 | cell-10-8 | cell-10-9 | cell-10-10 | cell-10-11 | cell-10-12 | cell-10-13 | cell-10-14 | cell-10-15 |
こんな風に、見出しのセルを固定表示できるんですね。これはもう、めちゃくちゃ便利だと思います。
テーブルはスクロールすると、見出しセルまでスクロールアウトしてしまうので、セルの項目が何の数字なのかわからなくなることが多々あったと思います。
エクセルなどでは、セルの固定ができていましたが、HTMLでは長い間実装されませんでした。
今回、このposition: sticky;が実装されたことで、エクセルのようなセル固定が可能となりました！
<th>へのposition: sticky;の反映のさせ方は、右側のCSS欄をご参照ください。