スマホで横スクロールできる表の作り方｜CSSで崩れないレスポンシブテーブル対応ガイド

12月 3, 2025 12月 3, 2025

小瀧

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

スマホでホームページを見たときに、「この表、横に切れて見づらいな…」と感じた経験はありませんか?

実はこの問題、飲食店のメニュー表、料金表、予約空き状況、比較表など、あらゆる業種のサイトで頻繁に起こっています。
パソコンでは問題なく表示されているのに、スマホになると文字が潰れ、列がはみ出し、読めない状態になってしまう。

その結果、ユーザーは内容を確認する前に離脱してしまいます。
これはデザインの問題だけでなく、集客や成約率にも直結する大きな機会損失です。
しかし安心してください。
スマホでは横スクロール、PCでは通常表示という形で、誰でも見やすい表はCSSだけで簡単に実装できます。
この記事では、実務でそのまま使える「スマホで横スクロールが必要な表の作り方」を、初心者の方にもやさしく、コピペできる形で解説していきます。

スマホで表が崩れる一番の原因

スマホで表が見づらくなる最大の原因は、画面幅に対して「列数が多すぎる」ことです。
PCでは1200px前後の横幅がありますが、スマホは300〜400px程度しかありません。
その限られた幅の中に、6列や7列の表を押し込めば、文字は潰れ、タップもしづらくなります。
そこで有効なのが「横スクロール対応」です。

基本構造スマホで横スクロールできる表

まずは、最もシンプルで実務でもよく使う方法からご紹介します。
ポイントは「表をスクロール用のラッパーで囲む」ことです。

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

<div class="table-scroll">
  <table class="scroll-table">
    <tr>
      <th>プラン</th>
      <th>料金</th>
      <th>内容</th>
      <th>備考</th>
    </tr>
    <tr>
      <td>ライト</td>
      <td>5,000円</td>
      <td>基本掲載</td>
      <td>初回向け</td>
    </tr>
  </table>
</div>

次にCSSです。

 .table-scroll {
    overflow-x: auto;
    width: 100%;
  }
  .scroll-table {
    min-width: 600px;
    border-collapse: collapse;
  }
  .scroll-table th,
  .scroll-table td {
    border: 1px solid #ccc;
    padding: 10px;
    white-space: nowrap;
  }

この構成だけで、スマホでは「横にスワイプして見る表」、PCでは「通常の表」として自然に表示されます。