【CSS】スマホのみテーブルを横スクロール可能にする方法

Webサイトでテーブルを使うと、PCでは問題なく表示できても、スマホでは横幅が収まりきらず、レイアウトが崩れてしまうことがあります。そのような場合、スマホのみに横スクロールを適用することで、見やすいデザインを実現できます。

本記事では、スマホのみでテーブルを横スクロール可能にする方法を紹介します。

スマホのみに横スクロールを適用する方法

スマホでのみテーブルを横スクロールできるようにするには、overflow-x: auto; を利用し、CSSのメディアクエリを活用します。

CSSの設定

以下のコードを適用することで、画面幅が768px以下のときのみテーブルをスクロール可能にします。

/* スマホのみ横スクロール可能にする */
@media screen and (max-width: 768px) {
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* スムーズなスクロール */
    white-space: nowrap; /* 折り返しを防ぐ */
  }

  table {
    min-width: 600px; /* テーブルの最小幅を設定 */
  }
}

ポイント

• .table-container に overflow-x: auto; を指定し、横スクロールを有効にする。
• -webkit-overflow-scrolling: touch; を追加することで、スマホでスムーズなスクロールが可能になる。
• white-space: nowrap; を適用し、セルの内容が折り返されるのを防ぐ。
• table に min-width を指定し、必要な幅を確保する。

HTMLの記述

テーブルを .table-container でラップすることで、スマホ時にスクロール可能なエリアを作ります。

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>見出し1</th>
        <th>見出し2</th>
        <th>見出し3</th>
        <th>見出し4</th>
        <th>見出し5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>データ1</td>
        <td>データ2</td>
        <td>データ3</td>
        <td>データ4</td>
        <td>データ5</td>
      </tr>
      <tr>
        <td>データA</td>
        <td>データB</td>
        <td>データC</td>
        <td>データD</td>
        <td>データE</td>
      </tr>
    </tbody>
  </table>
</div>

このように .table-container を用意しておくことで、スマホ時のみスクロール可能になります。

サンプル

実装後の動作確認

実装後、スマホや開発者ツールのレスポンシブモードで以下を確認しましょう。

✅ スマホ（768px以下）でテーブルが横スクロールできるか。
✅ PCでは通常の表示のままであるか。
✅ スクロールがスムーズに動作するか。

これらが問題なく機能していれば、正しく適用されています。

まとめ

スマホのみテーブルを横スクロール可能にする方法を紹介しました。

✅ .table-container に overflow-x: auto; を設定
✅ -webkit-overflow-scrolling: touch; でスムーズなスクロールを実現
✅ min-width を設定し、テーブルの最小幅を確保

この方法を使えば、スマホでのテーブル表示を快適にできます。レスポンシブデザインを考慮する際は、ぜひ活用してみてください！