テーブルを横スクロール対応にするCSS実装｜スマホでも崩れない表デザイン

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
Web制作の現場で、テーブルの横幅が長くなりスマホで表示が崩れる…という悩みを抱えた経験はありませんか？

特に価格表やスケジュール表のようなカラム数が多いテーブルでは、画面幅に収まりきらずデザインが破綻しやすいのが現実です。

そこで今回は、CSSだけでテーブルを横スクロール対応にする方法をご紹介します。
JavaScript不要で、レスポンシブにも簡単に対応できるテクニックです。

横スクロール対応の基本構造

テーブルをラッパー要素で囲み、オーバーフロー時にスクロール可能にするのが王道パターンです。
ポイントは overflow-x: auto; と white-space: nowrap; を活用することです。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

デザインを崩さずにスクロールを示す工夫

横スクロールが可能だと気づかれにくい問題があります。
そこでスクロールヒントを視覚的に示す工夫がおすすめです。

右端にグラデーションを置いて「続きがある」ことを示す

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

「左右にスワイプできます」などのテキストを表示する

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

初回ロード時だけ矢印アニメーションを表示する

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

レスポンシブデザインとの相性

テーブルはどうしても横幅が長くなるため、モバイルでは横スクロール前提にするのが現実的です。
PCではそのままテーブル表示、モバイルではスクロール可能にすることで、1つのコードで幅広いデバイスに対応できます。

まとめ

satokotadesignキャンペーン実施中！