【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はデザインに合わせて変更してください。

横スクロール時に一番左の列を固定する方法

最後に、一番左の列を固定して、横スクロール時にどの項目の情報を見ているのかを分かりやすくさせます。

一番左の列を固定するには、position: sticky を使います。

position: sticky は、通常の位置に配置されつつ、指定した位置までスクロールするとその場所に固定される指定です。

横方向に固定したい場合は、left: 0 を指定します。

HTMLは先ほどと同じです。

CSSは以下のようになります。先程のCSSに .table tr > :first-child が追加になっています。

.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;
    background-color: #fff;
}

/* これを追加 */
.table tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: #fff;
}

:first-child で各行の一番左のセルを指定し、position: sticky と left: 0 で横スクロール時に左端で固定します。

また、固定した列の後ろを他のセルが通るので、background-color: #fff; と z-index: 1; も入れています。