スマホ・タブレット表示で横スクロールできるテーブルの作り方！

公開日：2025-10-29

CSS
HTML

テーブルのカラムが3列以上あり、スマホ時に縦方向に並べ替えるのが難しいといった場合は、横スクロールで表示できるようにするのがおすすめです。

今回は、HTMLのtableタグで実装したテーブルを横スクロールできるようにする方法を解説します。

See the Pen スクロールできるテーブル by E-VALUE WORKS (@evw) on CodePen.

横スクロールできるテーブルの作り方

まずは、基本的な横スクロール対応テーブルの使い方を解説するため、ウィンドウ幅が600px以下になったときにテーブルを横スクロールできるように実装していきます。

See the Pen スクロールできるテーブル（ウィンドウ幅が800pxより狭くなった場合に横スクロール発生） by E-VALUE WORKS (@evw) on CodePen.

なお、スタート時点のファイル構成として、HTML・CSSは以下の内容を使用します。

■HTML

<table>
  <thead>
    <tr>
      <th>日付</th>
      <th>イベント名</th>
      <th>場所</th>
      <th>開始時間</th>
      <th>終了時間</th>
      <th>参加費</th>
      <th>定員</th>
      <th>備考</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>10/29</td>
      <td>WordPress講座</td>
      <td>大阪〇〇会議室</td>
      <td>13:00</td>
      <td>16:00</td>
      <td>¥6,000</td>
      <td>10名</td>
      <td>初心者歓迎</td>
    </tr>
    <tr>
      <td>11/5</td>
      <td>フロントエンド講座</td>
      <td>大阪〇〇会議室</td>
      <td>13:00</td>
      <td>16:00</td>
      <td>¥6,000</td>
      <td>10名</td>
      <td>懇親会あり</td>
    </tr>
  </tbody>
</table>

■CSS

table {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
  font-size: 12px;
}

th,
td {
  padding: 0.8em 1.2em;
  border: 1px solid #ccc;
}

table thead th {
  border-bottom: 3px solid #aaa;
  font-weight: 600;
  background-color: #f5f5f5;
}

STEP. 1：tableタグをラッパー要素で囲いoverflowプロパティを指定する

まずは、tableタグをラッパー要素で囲います。

今回は、wrapというクラス名のdivタグで囲うことにします。

<div class="wrap">
  <table>
    <thead>
      <tr>
        <th>日付</th>
        <th>イベント名</th>
        <th>場所</th>
        <th>開始時間</th>
        <th>終了時間</th>
        <th>参加費</th>
        <th>定員</th>
        <th>備考</th>
      </tr>
    </thead>
    <tbody>
      <!-- 省略 -->
    </tbody>
  </table>
</div>

続いて、追加したラッパー要素に対してoverflowプロパティを指定します。

overflowは、ラッパー要素内のコンテンツ（ここではテーブル）の横幅がラッパー要素の幅を超えた場合に、はみ出した部分をどのように表示するかを制御するプロパティです。

初期値では、「visible」が設定されているため、コンテンツがはみ出してもそのまま表示されていますが、overflow: auto;と指定することで、要素の内容がはみ出した場合にのみスクロールバーが表示され、スクロールして全体を確認できるようになります。

.wrap {
  overflow: auto;
}

table {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
  font-size: 12px;
}

/* 以下省略 */

overflow: scroll;を指定してもスクロールは可能ですが、この場合、要素がはみ出していない場合でも常にスクロールバーが表示されます。そのため、基本的にはoverflow: auto;の方が自然でおすすめです。

STEP. 2：横スクロールが発生するようにwidth（あるいはmin-width）を設定する

次に、横スクロールが発生するようにwidth（あるいはmin-width）を設定します。

現時点では、width: 100%と指定しているため、テーブルの横幅がウィンドウ幅と一致し、横スクロールは発生しません。

そこで、table 要素にmin-width: 600px;を指定し、ラッパー要素内のコンテンツがラッパー要素の幅を超えてはみ出す状態を作ります。

.wrap {
  overflow: auto;
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 600px;
  text-align: center;
  font-size: 12px;
}

/* 以下省略 */

これで、ウィンドウ幅が600pxより小さくなると、ラッパー要素からはみ出た部分がスクロールバーによって表示できるようになります。

See the Pen スクロールできるテーブル（ウィンドウ幅が800pxより狭くなった場合に横スクロール発生） by E-VALUE WORKS (@evw) on CodePen.

テキストが改行されそうな場合に横スクロールさせる方法

上の例では、min-widthに固定値を指定して横スクロールを発生させる方法を紹介しましたが、固定値ではなく、セル内のテキストが折り返されるまではtableタグをレスポンシブに可変させ、テキストが折り返されそうになったタイミングで横スクロールを発生させることもできます。

tableタグにmin-widthを指定する代わりに、white-space: nowrapを指定します。

.wrap {
  overflow: auto;
}

table {
  border-collapse: collapse;
  width: 100%;
  /* min-width: 600px; 削除 */
  text-align: center;
  font-size: 12px;
  white-space: nowrap; /* 追記 */
}

/* 以下省略 */

table要素にwhite-space: nowrap;を指定すると、その子要素（th・td）内のテキストはすべて改行されず、1行で表示されます。

そのため、本来であれば折り返されて表示されるはずのポイントで改行されず、結果として横スクロールが発生するようになります。

See the Pen スクロールできるテーブル（テキストが改行されそうな場合に横スクロール発生） by E-VALUE WORKS (@evw) on CodePen.