横スクロール対応テーブルを作る方法【HTML/CSS・サンプルコード付き】

html/css/js

横スクロール対応テーブルを作る方法

横スクロール対応テーブルを作る方法を紹介します。本記事では、HTMLとCSSを使用して、テーブルの横幅が画面より大きくなった場合でもレイアウトを崩さずに表示できる横スクロール対応テーブルを作成します。項目数が多い表や、スマートフォンで閲覧される可能性のあるサイトでは特に利用される実用的なテーブルです。

通常のテーブルは列数が増えると画面からはみ出したり、文字が極端に折り返されたりして見づらくなることがあります。このサンプルコードでは、テーブルを専用のラッパー要素で囲み、必要な場合のみ横スクロールバーを表示することで、表全体を維持したまま閲覧できるようにします。HTMLの構造はシンプルなままなので、既存のテーブルにも導入しやすい構成です。

商品比較表、料金表、スペック一覧、会員一覧、管理画面のデータ一覧など、列数が多いテーブルで活用できます。PCでは通常のテーブルとして表示され、横幅が不足する環境ではスクロールして閲覧できるため、表の内容を崩さずに見せたい場合に便利です。コピペで導入しやすく、実際のWebサイトでも利用しやすいサンプルになっています。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

項目名 内容 分類 状態 担当 開始日 終了日 優先度 進捗 備考
項目A サンプル内容A 分類A 確認中 担当A 2026/06/01 2026/06/10 高 60% 備考A
項目B サンプル内容B 分類B 完了 担当B 2026/06/03 2026/06/12 中 100% 備考B
項目C サンプル内容C 分類C 未対応 担当C 2026/06/05 2026/06/15 低 0% 備考C

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コードを指定 -->
  <meta charset="UTF-8">

  <!-- 表示幅を端末に合わせる -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>横スクロール対応テーブル</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- 横スクロール用の外枠 -->
  <div class="table-horizontal-scroll_wrap">

    <!-- 横幅が広いテーブル本体 -->
    <table class="table-horizontal-scroll_table">

      <thead>
        <tr>
          <th>項目名</th>
          <th>内容</th>
          <th>分類</th>
          <th>状態</th>
          <th>担当</th>
          <th>開始日</th>
          <th>終了日</th>
          <th>優先度</th>
          <th>進捗</th>
          <th>備考</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>項目A</td>
          <td>サンプル内容A</td>
          <td>分類A</td>
          <td>確認中</td>
          <td>担当A</td>
          <td>2026/06/01</td>
          <td>2026/06/10</td>
          <td>高</td>
          <td>60%</td>
          <td>備考A</td>
        </tr>

        <tr>
          <td>項目B</td>
          <td>サンプル内容B</td>
          <td>分類B</td>
          <td>完了</td>
          <td>担当B</td>
          <td>2026/06/03</td>
          <td>2026/06/12</td>
          <td>中</td>
          <td>100%</td>
          <td>備考B</td>
        </tr>

        <tr>
          <td>項目C</td>
          <td>サンプル内容C</td>
          <td>分類C</td>
          <td>未対応</td>
          <td>担当C</td>
          <td>2026/06/05</td>
          <td>2026/06/15</td>
          <td>低</td>
          <td>0%</td>
          <td>備考C</td>
        </tr>
      </tbody>

    </table>

  </div>

</body>
</html>

ファイル構成と設置方法

このサンプルでは、HTMLとCSSを別ファイルで管理します。HTMLに列数の多いテーブルを記述し、CSSでテーブル全体を囲む外枠に横スクロールを設定します。JavaScriptは使用しないため、シンプルな構成で導入できます。 

sample/
├── index.html
└── style.css

index.html と style.css を同じフォルダへ配置し、ブラウザで index.html を開いてください。横スクロールを発生させたい場合は、style.css 内の min-width を大きめに指定します。列数や表示内容を変更したい場合は、HTML内の <th> と <td> を編集してください。

コメント