料金表やスペック比較表のように横に長い表をスマートフォンで見せるとき、見出し行と左端の列の両方を画面に残したい、という場面は制作の現場でよくあります。ところが、これまでのCSSでは片方しか固定できず、JavaScriptで補ったり見出しを二重に用意したりするのが定番の回避策でした。10月に安定版になったChrome 156で、この古い悩みをCSSだけで片付けられる仕組みが使えるようになっています。
片方しか固定できなかった理由
横に長い表は、レイアウトを崩さないよう overflow-x: auto を指定した囲みに入れるのが一般的です。そのうえで見出し行に position: sticky; top: 0;、左端の列に position: sticky; left: 0; を指定すれば、両方が残りそうに見えます。
実際には、横スクロールでは左端の列が残るものの、ページを縦にスクロールすると見出し行はそのまま流れて消えてしまいます。Chromeの開発者向け広報を担当するBramus氏の解説によると、原因は overflow の仕様にあります。片方の軸に auto や scroll を指定すると、もう片方の軸も自動的にスクロールする扱いになり、囲みが縦横両方の基準になってしまうためです。見出し行は縦にはスクロールしない囲みに貼り付こうとするので、結果として固定が効きません。
この問題はCSSの仕様を検討する作業部会に2017年から要望として上がっていた、かなり息の長いテーマでした。
片方の軸だけをスクロールさせる指定
今回の変更は、overflow にスクロールする値と clip を組み合わせて書けるようにするものです。Googleの技術者が公開している解説文書によると、これまでも overflow: scroll clip のような書き方自体はできましたが、clip は自動的に hidden に置き換えられていました。新しい挙動では clip がそのまま残り、その軸ではスクロールの基準にならなくなります。
表の例に当てはめると、囲みの指定は次のようになります。
.table-wrapper {
overflow: auto clip;
}
.table-wrapper thead {
position: sticky;
top: 0;
}
.table-wrapper td:first-child {
position: sticky;
left: 0;
}横方向は囲みの中でスクロールし、縦方向は clip で切り離されます。こうすると左端の列は囲みを基準に、見出し行はページ全体のスクロールを基準に、それぞれ別々に貼り付きます。ここで overflow-x: auto だけを書くと縦も auto に計算されて元の状態に戻ってしまうので、clip を明示するのがポイントです。
解説文書では、スクロールを片方に絞ったカルーセルで scrollIntoView() を呼んだときの挙動も改善点として挙げられています。hidden で隠した軸はスクリプトから動かせてしまい、利用者には戻す手段がありませんでしたが、clip にすればその軸は動かなくなります。
使いどころと気をつけたい点
中小企業のサイトでも、料金プランの比較、製品の仕様一覧、営業時間や時刻表など、横に長い表を載せる機会は少なくありません。スマートフォンで横にスクロールしているうちに、どの列が何の項目か分からなくなるのはよくある不満なので、見出しと項目名の両方が残るだけで読みやすさはかなり変わります。
一方で、現時点で対応しているのはChromium系のブラウザだけです。Bramus氏の記事の対応状況では、FirefoxとSafariは未対応とされています。ブラウザ間の互換性をそろえる取り組みであるInteropでも、2027年の重点分野の候補として提案が出たばかりで、WebKitとMozillaの立場表明はまだ保留の段階です。未対応のブラウザでは従来どおり片方だけが固定される表示になるため、見出しが流れても表として読める作りにしておくのが無難です。対応の有無は @supports named-feature(single-axis-scroll-container) で判定できるとされているので、対応ブラウザにだけ指定を足す書き方もできます。
もうひとつ、既存のサイトへの影響にも目を向けておきたいところです。これまで clip が hidden に読み替えられていたのを前提に組まれたページでは、挙動が変わる可能性があります。Chromeは公開前に互換性の調査を行ったとしていますが、もし表示が変わった場合は clip を hidden に書き換えれば以前の挙動に戻せると案内されています。手元で管理しているサイトに overflow: scroll clip や overflow: auto clip の指定が残っていないか、一度検索してみると安心です。
JavaScriptに頼っていた部分を減らせる
表の見出しを固定するために、スクロール位置を監視して位置を合わせ直すスクリプトを入れている案件は意外と多いはずです。解説文書でも、スクリプトによる再現は電池を消耗し、保守しにくく、スクロールとの同期も完全にはならないと指摘されています。CSSの指定ひとつで済むなら、表示のずれやちらつきの心配も減り、更新時に壊れる箇所も少なくなります。
他のブラウザがそろうまでは段階的な導入になりますが、表をよく使うサイトなら、まずは対応ブラウザで見出しが残る仕上がりを試しておくと、全ブラウザで使えるようになったときにすぐ切り替えられます。長年の回避策を少しずつ手放していける変更として、覚えておいて損はない機能です。
