テーブル見出しを固定してください

 (btxx.org)
4 ポイント 投稿者 GN⁺ 2024-02-25 | 1件のコメント | WhatsAppで共有

テーブル見出しを固定してください

  • Web上では大きなデータセットやテーブルレイアウトをよく扱う。
  • 数百行あるテーブルでスクロールを始めると問題が発生する。
  • テーブルヘッダーが見えなくなると、ユーザーは各列が何に対応しているのかを覚えておくのが難しい。

固定ヘッダー

  • 固定ヘッダーは魔法のように見えるが、実装はとても簡単。
  • thead にたった2つのCSSプロパティを追加するだけでよい:
    • position: sticky;
    • top: 0;
  • 世界全体で約96%のサポート率を持つ sticky は、多くのブラウザーで安定して利用できる。
  • ユーザー体験の向上にも役立つ。

GN⁺の意見

  • Webサイトで大きなテーブルを扱うとき、ユーザーがスクロールしてもテーブルの見出しを簡単に確認できるようにすることは、ユーザー体験を大きく向上させる。
  • CSSの position: sticky; プロパティを使って簡単にテーブルヘッダーを固定できることは、Web開発者にとって有用な情報である。
  • この機能は広くサポートされているため、Web開発者はさまざまなブラウザーで安定して実装できることがわかる。

関連記事

1件のコメント

 
GN⁺ 2024-02-25
Hacker Newsのコメント
  • 1軸での固定ヘッダー（sticky headers）は可能だが、CSSが両軸でサポートする日を待っている: GitHub issue link
  • CSSの知識はほとんどないが、それでも機能するWebアプリを作ってきた。最近、20,000行を超えるテーブルで固定ヘッダーを試したが、BootstrapのクラスやStack Overflow、GPT、CodePenの提案を試しても奇妙な副作用が発生した。しかし、この投稿のCodePenを使って2分で解決し、本番環境に適用できた。感謝したい。
  • position: sticky; を使ってテーブルヘッダーを固定するのは簡単そうに見えるが、テーブル内容に何らかの処理を加えると問題が起きる。たとえば、ユーザーがテーブルをスクロールし、ページを離れてから戻ったときにスクロール位置を復元する機能を追加したところ、復元された位置が常に1行下にずれていた。透明なテーブルヘッダー越しに見ると、目的の行は最上部にあるが、ヘッダーが重なっているため次の行が最初に見える。スクロール位置をヘッダーの高さを考慮して調整すると最初はうまく動くが、ときどき数ピクセルずれる。これはテーブルが大きいためスクロールイベントに応じて遅延読み込みを行っており、さらに自動テーブルレイアウトを使っているので、ときどきヘッダーセルの幅が狭くなりすぎて単語が折り返され、ヘッダー全体の高さが増えるためだ。最終的な解決策は、ヘッダー要素に ResizeObserver を作成し、高さが変わるたびにスクロール位置を動的に調整することだった。ResizeObserverドキュメント
  • テーブルヘッダーの境界線も固定したいなら、次のようなCSSコードを使える: 
    table thead:before {
  content: '';
  position: absolute;
  width: 100%;
  top: 0;
  border-top: 2px solid;
}

table thead:after {
  content: '';
  position: absolute;
  width: 100%;
  bottom: 0;
  border-bottom: 1px solid;
}
  • テーブルヘッダーは自動的に固定されてほしい。開発者が <th> タグを使うという追加の手間をかけるなら、それが望む挙動である可能性が高い。
  • コマンドラインでは、ヘッダーを標準エラー（stderr）に、本体を標準出力（stdout）に送るのがよい。そうしないと、ソート時にヘッダーが結果に混ざってしまうことがある。
  • Chromeは過去に <thead> と <tr> 要素で position: sticky プロパティを使えないようにしていた: Chromium issue link
  • 固定ヘッダーの代わりに、制限されたビューポート高を使ってヘッダーが常に見えるようにすることを提案する。たとえばDataGridXLではそうしている: DataGridXL link（自作であることを明記）
  • CodePenの例では、top を境界線を考慮して設定すると（たとえば -1px ではなく 0）、テーブル本体がヘッダーの上に流れ込むのを防げる。2つのCodePenの例を比較している: 既存のCodePen と 改善版のCodePen
  • 「お願いだからやめてくれ」と言いたい人もいる: Hacker News discussion link