料金表を横に動かしたら、どのプランを見ていたのかわからなくなる。下まで読んだら、今度は上の項目名が見えなくなる。
横長の表で気になるこの2つを、CSSでまとめて解消できるか試すために、小さなデモを作りました。
プラン名は左に、項目名は上に残したい
今回用意したのは、6列・12プランの料金表です。横に動かしたときは左のプラン名、縦に読んだときは上の項目名を残す構成にしています。料金と内容はすべて比較用の架空データです。
デモには「単一軸」と「従来」の切り替え、固定ヘッダーのオン・オフを用意しました。「表の途中へ移動」を押すと、上の見出しの違いを比べやすくなります。
下のデモ枠の中を縦にスクロールして比較できます。横方向はスワイプ、または「横位置」のスライダーで動かせます。
ポイントは、横方向だけをスクロール領域にすること
.table-scroll {
overflow: auto clip;
}
thead th {
position: sticky;
top: 64px;
}
tbody th {
position: sticky;
left: 0;
}overflow: auto clipは、横方向にauto、縦方向にclipを指定する書き方です。単一軸スクロールコンテナーに対応するブラウザでは、横方向だけをスクロール領域として扱えます。
そのため、上の見出しはページの縦スクロールに、左のプラン名は表の横スクロールに合わせて固定できます。固定の処理はCSSで行い、JavaScriptは比較ボタンや横位置の操作、状態の表示に使っています。
固定ヘッダーがあるなら、上の位置も合わせる
デモのサイトヘッダーは高さ64pxなので、表の上見出しにもtop: 64pxを指定しました。左上のセルは縦横どちらにも固定するため、背景色と重なり順も分けています。
実際のサイトでは、ヘッダーの高さやスマホでの表示に合わせて調整したいところです。ヘッダーが伸び縮みする構成なら、その高さが変わる場合も確認します。
僕なら、比較する項目が多い料金表で使う
プラン数や比較項目が多い表では、今見ている内容と見出しを対応させやすくなりそうです。反対に、プランが2〜3個なら、カード型で並べた方が読みやすいこともあります。まず内容に合う見せ方を選び、その上で使いたいと思います。
なお、overflow: auto clipと書けることだけでは、狙った動きになるとは限りません。デモには計算後の縦方向の値も表示していますが、それだけで判断せず、実際に縦横へ動かして確認する必要があります。今回の確認範囲は下に記載します。
確認した範囲：2026年11月5日、内蔵ブラウザのデモ枠内で確認しました。単一軸指定では、縦スクロール後も上見出しが固定ヘッダー直下の64pxに残り、横スクロール後も左のプラン名が残りました。従来指定では同じ縦位置で上見出しが画面外へ流れることを確認しています。Safari・Firefox・実機スマートフォンでは未検証です。