- 行数の多いテーブルは、スクロールするほど列の意味を忘れやすくなり、データが読みづらくなる
thead に position: sticky; と top: 0; を追加するだけで、ヘッダー固定を実装できるsticky は世界全体で約 96% のブラウザ対応があり、実験的機能に近いものではない- 300番目の項目のような下の行を見ているときでも列見出しが残るため、表の閲覧体験が向上する
- 実装は小さいのに効果は大きく、長いテーブルを提供するWebページなら基本的な使いやすさ改善として適用する価値がある
長いテーブルでヘッダーが消える問題
- 大きなデータセットや数百行あるテーブルでは、スクロール後にテーブルヘッダーが画面外へ消えてしまう
- 300番目の項目まで下がると、各列のデータが何を意味するのかを再確認しづらくなることがある
- 初見のテーブルほど列の意味を覚えながら読む必要があり、閲覧の負担が大きくなる
thead に sticky を適用する
- 解決方法は
thead に2つのCSSプロパティを追加すること
position: sticky;
top: 0;
position: sticky と top: 0 を組み合わせると、スクロール中でもヘッダーを画面上部に固定できるsticky は約 世界全体で96% の対応率があり、多くのブラウザで利用できる- 実際の動作は CodePen の例 で確認できる
1件のコメント
Hacker News のコメント
一方の軸だけの固定ヘッダーならよいが、CSS が両軸をサポートする日をいまだに待っている: https://github.com/w3c/csswg-drafts/issues/8286
overflow-x: autoも使いたいのに、どちらか一方しか選べないと言われる正直に言うと、CSS の知識がほとんどなくてもそれなりに動く Web アプリは作れてしまっている。最近、約2万行の怪物テーブルでヘッダーを固定しようとしていた: https://www.datasciencemeta.com/rpackages 最初は Bootstrap のテーブルクラスに
class="table table-header-sticky"みたいなものがあると期待したがなかったし、Stack Overflow、GPT、CodePen の提案を 20 分ほどいじっても妙な副作用が出た ところがこの記事の CodePen では 2 分で動き、今まさに本番へデプロイしているところだテーブルヘッダーの固定は
position: sticky;ひとつで簡単そうに見えるが、テーブル内容に何かを追加し始めるとすぐ複雑になる 固定ヘッダー付きのテーブルで、ユーザーが本文をスクロールしてページを離れたときに最初に見えていた行のインデックスを保存し、戻ってきたときに復元する機能を付けたのだが、いつも 1 行ほど下にずれて復元されていた。調べてみると、5 行目は実際にはテーブル最上部にあったのに、theadが重なっていたせいで 6 行目が最初の行のように見えていた そこでtheadの高さを考慮してスクロール位置を調整したが、ときどき数ピクセルずれていた。大きなテーブルなのでスクロールイベントで遅延読み込みをしており、さらにデフォルトの自動テーブルレイアウトを使っていたため、ヘッダーセルが折り返されてヘッダー全体の高さが変わっていたのだ。最終的にはtheadにResizeObserverを付けて、高さが変わるたびにスクロール位置を動的に調整した [1] https://developer.mozilla.org/en-US/docs/Web/API/ResizeObser...これを実装する際、ヘッダーの境界線も一緒に固定したいなら、
table thead:beforeとtable thead:afterにposition: absolute、width: 100%、top: 0/bottom: 0、border-top/border-bottomを与える形で対処できるテーブルヘッダーは自動的にこう動いてほしい。開発者がわざわざ関連タグを使って追加作業をしているなら、たいてい既に望んでいる動作はこちらのはずだ
の代わりにを 500 個、その各の中に 45 層ネストしたでテーブルを作るサイトが増えているので、そういう場所では効かない気がするコマンドラインではヘッダーは stderr、本文は stdout に送ればよい そうしなければ
heights | sort -k2 -nrの結果はGeorge 186、Wally 173、NAME HEIGHTの順になるが、ヘッダーが stdout を迂回すればNAME HEIGHT、George 186、Wally 173の順になるheights | (sed -u 1q; sort -k2 -nr)が正しく動く 出典: https://stackoverflow.com/a/56151840heightsがファイルなら% head -1 heights ; sed 1,1d heights | sort -k2 -nrのようにできるし、heightsが 2 回実行するには高コストな実行ファイルなら% heights > /tmp/heights ; head -1 /tmp/heights ; sed 1,1d /tmp/heights | sort -k2 -nrのようにできる。awkにパイプしてもよい 別の選択肢は利便性では劣るが、意外性は少なく、実行ファイル作者が別の考えを持っていても動くこれは長い間動かなかった。Chrome は以前
theadとtr要素でposition: stickyを無効化していた: https://issues.chromium.org/issues/41303743 ブラウザ対応表はほとんど全部緑色に見えたのに、肝心の Chrome のテーブルでは動かなかった記憶があるむしろ「お願いだからやめてほしい」と言いたい側でもある: https://news.ycombinator.com/item?id=32998091
stickyプロパティの何が悪いのか？CodePen は
topを境界線の分だけオフセットすると、もっとよく見える。たとえば0の代わりに**-1px** にすると、テーブル本文がヘッダーの上に透けて見えるのを避けられる 比較: https://codepen.io/bradleytaunt/pen/bGZyJBj 修正版: https://codepen.io/alokmenghrajani/pen/ExMBQow固定ヘッダーの代わりに制限されたビューポート高さを使って、ヘッダーが常に見えるようにする方式を提案する DataGridXL(https://datagridxl.com) のようにすればよい。ちなみに私が作ったものだ