横スクロールするテーブルはラッパーで包む（table に overflow-x は効かない）

どんな時に使う？

列の多い表をスマホで表示すると、表が画面からはみ出してページ全体が横に揺れる。よくある誤りが table に overflow-x: auto を書く方法で、display: table の要素ではスクロールコンテナにならず、何も起きない。表だけを横スクロールさせたいときの定番の直し方。

コード／手順

方法1: ラッパーで包む（おすすめ）

<div class="table-scroll" tabindex="0" role="region" aria-label="料金表">
  <table>…</table>
</div>

.table-scroll {
  overflow-x: auto;
}
.table-scroll > table {
  min-width: 640px; /* これより狭いと横スクロール */
  border-collapse: collapse;
}

方法2: table 自体を block にする

table.is-scrollable {
  display: block;
  overflow-x: auto;
}

• 方法1は table の表示（display: table）をそのまま保てるので、列幅の自動計算や border-collapse が素直に効く。
• 方法2はマークアップを変えられないとき（CMS 出力など）に便利。

注意点・対応状況

• 方法2で display: block にすると、一部のスクリーンリーダーが表として読み上げなくなることがある。可能なら方法1を選ぶ。
• スクロール領域にはキーボードで入れるよう tabindex="0" と、領域名を示す role="region" ＋ aria-label を付けておくと親切。
• 投稿者は「こういう些細な落とし穴は最近の AI なら指摘してくれるので、小さな CSS でも AI に書かせてみる価値がある」とも述べている。

出典

• @tak_dcxi · 2026-10-15