スマホ表示でtableを横スクロールさせる方法【CSS】

この記事の前提条件

対象: CSS(全モダンブラウザ対応)
難易度: ★☆☆
所要時間: 約5分

列数の多い料金表や比較表、PCではきれいに収まっていても、スマホの狭い画面では列がはみ出して崩れてしまう…tableタグを使ったコンテンツでよくある悩みです。列を無理に減らすのではなく、テーブル部分だけ横スクロールできるようにするのが定番の対処法です。

親要素で囲んでoverflow-xを指定する

tableタグ自体ではなく、テーブルを囲むdivタグ側にスクロールの指定をするのがポイントです。

<div class="table-scroll">
  <table>
    ...
  </table>
</div>

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* iOSでの慣性スクロールを有効化 */
}

overflow-x: auto;を指定すると、中の要素(table)が親要素の幅からはみ出た時だけ、自動的に横スクロールバーが表示されます。table自体の列幅やレイアウトを崩さずに済むのがメリットです。

💡 スクロールできることに気づいてもらう工夫

横スクロールできる仕組みを作っても、見た目上「スクロールできる」と気づいてもらえないことがあります。テーブルの右端がふわっと薄いグラデーションで途切れて見えるようにしたり、「→スワイプできます」といった一言のテキストを添えたりすると、読者が横に隠れた情報を見落とさずに済みます。