[CSS] position sticky を使ってtableのヘッダー・列を固定する方法

MARKLEAPS

スクロール量の多い table（表）では、「どの列・行を見ているのか分からなくなる」ことがあります。

CSS の position: sticky を使えば、JavaScriptを使わずに table のヘッダー行や列を固定でき、この問題を解消できます。

本記事では、よく使われる3つの固定パターンと、position: sticky が効かないときに確認したいよくある失敗例をデモ付きで分かりやすく紹介します。

縦スクロールで table の thead（ヘッダー行）を固定する方法

デモ内容

縦に長い table
縦スクロールするとヘッダー行（thead）が上部に固定
横スクロールはなし

See the Pen 【position: sticky;】縦スクロールで「thead」を固定 by mkl may (@mkl-may) on CodePen.

解説
thead th に position: sticky と top: 0 を指定することで、下スクロール時も項目名を常に表示できます。
基本的かつ使用頻度の高いパターンで、一覧表・検索結果・管理画面などでよく使われます。

横スクロールで table の左端の列を固定する方法

デモ内容

横に長い table
1列目（ID・名前など）を固定
横スクロールしても左端の列が残る

See the Pen 【position: sticky;】横スクロールで「左端の列」を固定 by mkl may (@mkl-may) on CodePen.

解説
固定したい th・td に position: sticky と left: 0 を指定します。
Excel の「ウィンドウ枠の固定」と同じ感覚で使えるため、数値比較や一覧性が求められる画面に向いています。

縦＋横スクロール：行＋列の同時固定

デモ内容

縦・横の両方向にスクロール
thead（ヘッダー行）を固定
左端の列も固定
左上セルは特別に処理

See the Pen 【position: sticky;】縦＋横スクロール：行＋列の同時固定 by mkl may (@mkl-may) on CodePen.

解説
行と列を同時に固定する場合、左上セル（thead × 左端列の交差部分）の z-index を最も高くする必要があります。
業務システムや管理画面で特に需要が高い構成です。

position: sticky が効かない？よくある失敗例と原因

親要素に overflow: hidden が指定されている

See the Pen 【position: sticky;】失敗例：親要素に overflow: hidden がある by mkl may (@mkl-may) on CodePen.

解説
position: sticky は、直近のスクロールコンテナ（overflow: auto / scroll）を基準に動作します。
親要素に overflow: hidden が指定されていると、sticky が正しく機能しないため注意が必要です。

固定セルに背景色を指定していない（下の行が透ける）

See the Pen 【position: sticky;】失敗例：固定する行に背景色を指定していない（下の行が透ける） by mkl may (@mkl-may) on CodePen.

解説
sticky で固定されたセルは、下の要素の上に重なって表示されます。
そのため、背景色を指定しないと下の行が透けて見えてしまいます。

z-index 未指定で固定セルが背面に回る

See the Pen 【position: sticky;】失敗例：他のセルに z-index が指定されているのに、固定する行に背景色を指定していない（下の行が透ける） by mkl may (@mkl-may) on CodePen.

解説
position: sticky は z-index を指定しなくても正しく表示される場合がありますが、他のセルや親要素に z-index や transform が指定されていると、固定セルが背面に回って隠れることがあります。
sticky 要素には予防的に z-index を指定するのが安全です。