テック技報最新号へ →
CSS

overflow: auto clip で横スクロールの表でも見出し行をページ上端に固定する（単一軸スクロールコンテナー）

横長の表のラッパーを overflow: auto clip にすると横方向だけのスクロールコンテナーになり、左端の列はラッパー基準、見出し行はページ基準で、それぞれ position: sticky で固定できる。

@clockmaker · 投稿 2026-11-04

どんな時に使う？

料金表・スペック比較表・工程表など、横にはみ出す表をラッパーで横スクロールさせつつ、ページを縦にスクロールしても見出し行を画面上端に残したいとき。

これまでは overflow-x: auto を付けると、縦方向の visible が自動で auto に計算され、ラッパーが縦横両方のスクロールコンテナーになっていた。position: sticky は軸ごとに一番近い祖先のスクロールコンテナーを基準にするので、見出し行の top: 0 は「縦にはスクロールしないラッパー」に貼り付こうとして、結局ページと一緒に流れてしまっていた。

コード

css
.table-wrapper {
  overflow: auto clip; /* = overflow-x: auto; overflow-y: clip; */
}

/* 見出し行はページの縦スクロールに追従 */
.table-wrapper thead th {
  position: sticky;
  top: 0;
}

/* 左端の列はラッパーの横スクロールに追従 */
.table-wrapper tbody th {
  position: sticky;
  left: 0;
}
  • 縦を clip にすると、その軸ではスクロールコンテナーにならないので、top の基準はさらに外側（ページ）になる。
  • 行見出しを2列固定するときは、2列目を1列目の幅だけずらして left: 160px のように指定する。
  • container-type: scroll-state と組み合わせると、scroll-state(stuck: top) で固定中だけ見出しを小さくしたり、scroll-state(scrollable: right) で「まだ右にある」影を出したりできる（ICS MEDIA のデモ②）。

注意点・対応状況

  • Chrome・Edge 156（2026年10月）から。Firefox・Safari は未対応。
  • 未対応ブラウザでは片軸の clip が hidden 扱いになり、見出し行は従来どおり流れる。それでも表として読める作りにしておく。
  • 検出は @supports (overflow: auto clip) ではなく @supports named-feature(single-axis-scroll-container) を使う（前者はパースできるかしか見ない）。詳しくは @supports named-feature() で「挙動の変化」を検出する。
  • 副作用もある: clip 側の軸では overscroll-behavior が効かない、scrollTo() などでもその軸には動かせない、grid・flex のアイテムで min-width: auto の既定の最小サイズが効いてコンテナが広がることがある。
  • <table> 自体に overflow を書いても効かないので、ラッパーで包む前提は 横スクロールするテーブルはラッパーで包む（table に overflow-x は効かない） と同じ。

出典

  • @clockmaker（2026-11-04、ICS MEDIA「CSSだけで横スクロールと見出し固定を両立！ 単一軸スクロールコンテナー」ics.media/entry/261104/ の紹介）
  • 参考: Chrome for Developers「単一軸スクロール コンテナ」developer.chrome.com
X の元の投稿を開く