【保存版】HTMLとCSSで作る横スクロールできるテーブルの実装方法

はじめに

Web制作において、表（テーブル）をスマホでどう見せるかは大きな課題です。

PCでは十分な横幅があるため問題ありませんが、スマホ画面では以下のような悩みが発生します。

列が多すぎて テーブルが画面からはみ出す
無理やり縮小されて 文字が読みにくくなる
デザインが崩れて ユーザー体験が悪化する

この課題を解決する方法が 「横スクロールできるテーブル」 です。

本記事では、HTMLとCSSだけで横スクロール対応テーブルを実装する方法を、初心者にも実務者にもわかりやすく解説します。

通常のテーブルの問題点

まず、通常のテーブルをそのままマークアップした例を見てみましょう。

<table>
  <thead>
    <tr>
      <th>商品名</th>
      <th>価格</th>
      <th>在庫</th>
      <th>カテゴリ</th>
      <th>発売日</th>
      <th>レビュー数</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>商品A</td>
      <td>2,000円</td>
      <td>あり</td>
      <td>家電</td>
      <td>2025-01-01</td>
      <td>35件</td>
    </tr>
  </tbody>
</table>

PC表示では問題ありませんが、スマホで表示すると 横幅が収まらず、はみ出しや文字つぶれが発生します。

これを解消するのが次の方法です。

基本の解決方法：ラッパー＋CSSで横スクロール化

HTML

<div class="table-wrap">
  <table>
    <thead>
      <tr>
        <th>商品名</th>
        <th>価格</th>
        <th>在庫</th>
        <th>カテゴリ</th>
        <th>発売日</th>
        <th>レビュー数</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>商品A</td>
        <td>2,000円</td>
        <td>あり</td>
        <td>家電</td>
        <td>2025-01-01</td>
        <td>35件</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

.table-wrap {
  overflow-x: auto;               /* 横スクロールを有効化 */
  -webkit-overflow-scrolling: touch; /* スマホでのスムーズスクロール */
}

.table-wrap table {
  border-collapse: collapse;
  width: 100%;
  min-width: 600px; /* 横幅を確保しスクロール可能にする */
}

.table-wrap th,
.table-wrap td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: left;
  white-space: nowrap; /* セル内での改行を防ぐ */
}

UXを改善する応用テクニック

ただ横スクロールできるだけでは「ユーザーが気づかない」こともあります。

そこで、見やすさ・使いやすさを向上させる工夫を紹介します。

1. スクロールのヒントを表示

<p class="scroll-hint">※ 横にスクロールできます</p>

小さな一文を追加するだけで、ユーザーが迷わなくなります。

2. グラデーションで「続きがある」ことを示す

.table-wrap {
  position: relative;
  overflow-x: auto;
}

.table-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 100%;
  background: linear-gradient(to left, #fff, transparent);
  pointer-events: none;
}

右端にグラデーションを表示することで、直感的に「横に続きがある」と気づけます。

3. メディアクエリでPCとスマホを分ける

PCでは通常表示、スマホだけスクロール対応にすることも可能です。

@media (max-width: 768px) {
  .table-wrap {
    overflow-x: auto;
  }
  .table-wrap table {
    min-width: 600px;
  }
}

これで デバイスに合わせた最適表示 が実現できます。

実務でのベストプラクティス

列数が多いテーブルは横スクロール必須
「スクロールできることを伝える工夫」が重要
min-widthを適切に調整 → 列数やデータ内容に応じて調整すべし
アクセシビリティを考慮 → 見出しセル（<th>）を正しくマークアップ

さらに高度な実装では、ヘッダー行を固定したまま横スクロールや、縦＋横スクロール両対応といったテクニックも有効です。

まとめ

HTMLとCSSだけで横スクロール対応のテーブルを作る方法を紹介しました。

実装手順まとめ

<div class=”table-wrap”> でテーブルをラップ
CSSで overflow-x: auto; を設定
min-width と white-space: nowrap; で崩れを防ぐ
UX向上のために ヒントやグラデーション を追加

これで、PCでもスマホでも快適に使える レスポンシブ対応テーブル を実装できます。

(Visited 2 times, 1 visits today)