【HTML/CSS】横スクロールできる表（テーブル）の作り方

今回は、HTMLとCSSで横スクロールできる表の作り方を解説します。

スマホ環境ですと表が入りきらないこともあるので、横スクールの仕方を覚えておくと良いでしょう。

横スクロールできる表の実装方法
- white-spaceプロパティを使う方法
- min-widthを使う方法
まとめ

横スクロールできる表の実装方法

横スクロールさせる方法は、主に二つあります。white-spaceプロパティを使う方法と、min-widthプロパティを使う方法です。

この2つの方法を、それぞれ紹介したいと思います。

実装のポイントは以下のようになります。

実装のポイント

table要素の親要素に、overflow-y: scroll
table要素は、親要素をはみ出るようにする

white-spaceプロパティを使う方法

white-spaceにnowrapを指定して、テキストの折り返しを禁止して横スクロールさせる方法です。

HTMLはこんな感じです。

<div class="table-wrap">
  <table class="table">
    <tr>
      <th>サンプルテキスト</th>
      <td>これはサンプルテキストです。</td>
      <td>これはサンプルテキストです。</td>
      <td>これはサンプルテキストです。</td>
      <td>これはサンプルテキストです。</td>
    </tr>
    <tr>
      <th>サンプルテキスト</th>
      <td>これはサンプルテキストです。</td>
      <td>これはサンプルテキストです。</td>
      <td>これはサンプルテキストです。</td>
      <td>これはサンプルテキストです。</td>
    </tr>
    <tr>
      <th>サンプルテキスト</th>
      <td>これはサンプルテキストです。</td>
      <td>これはサンプルテキストです。</td>
      <td>これはサンプルテキストです。</td>
      <td>これはサンプルテキストです。</td>
    </tr>
    <tr>
      <th>サンプルテキスト</th>
      <td>これはサンプルテキストです。</td>
      <td>これはサンプルテキストです。</td>
      <td>これはサンプルテキストです。</td>
      <td>これはサンプルテキストです。</td>
    </tr>
  </table>
</div>

CSSは以下のようにします。

.table-wrap {
  overflow-x: scroll;
}
.table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
}
.table th,
.table td {
  border: 2px solid #eee;
  padding: 4px 8px;
}

ポイントとしては、table要素を囲む.table-wrapにoverflow: scrollを指定して、table要素にはwhite-space:nowrapを指定している点です。

overflow: scrollははみ出た要素はスクロールして表示させるために指定します。

white-space: nowrapはテキストの折り返しを禁止するために指定します。

テーブル内のテキストは自動では改行されないので、改行したい場合はbr要素で改行させてください。

min-widthを使う方法

min-widthプロパティでテーブルの最小サイズを指定して、コンテンツ幅がそれより小さくなる横スクロールするという方法です。

HTMLは先ほどと同じです。

<div class="table-wrap">
  <table class="table">
    <tr>
      <th>サンプルテキスト</th>
      <td>これはサンプルテキストです。</td>
      <td>これはサンプルテキストです。</td>
      <td>これはサンプルテキストです。</td>
      <td>これはサンプルテキストです。</td>
    </tr>
    <tr>
      <th>サンプルテキスト</th>
      <td>これはサンプルテキストです。</td>
      <td>これはサンプルテキストです。</td>
      <td>これはサンプルテキストです。</td>
      <td>これはサンプルテキストです。</td>
    </tr>
    <tr>
      <th>サンプルテキスト</th>
      <td>これはサンプルテキストです。</td>
      <td>これはサンプルテキストです。</td>
      <td>これはサンプルテキストです。</td>
      <td>これはサンプルテキストです。</td>
    </tr>
    <tr>
      <th>サンプルテキスト</th>
      <td>これはサンプルテキストです。</td>
      <td>これはサンプルテキストです。</td>
      <td>これはサンプルテキストです。</td>
      <td>これはサンプルテキストです。</td>
    </tr>
  </table>
</div>

CSSは以下のようになります。

.table-wrap {
  overflow-x: scroll;
}
.table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
}
.table th,
.table td {
  border: 2px solid #eee;
  padding: 4px 8px;
}

ポイントとしては、table要素を囲む.table-wrapにoverflow: scrollを指定して、table要素にはmin-width: 600pxを指定している点です。

コンテンツの幅が600pxより小さくなれば、横スクロールになるという指定方法です。

pxはデザインに合わせて変更してください。