【CSS】レスポンシブ(スマホ)対応横スクロールテーブル(表)

(2021/03/18 文章追加とコード微修正)

レスポンシブ対応のホームページの制作で面倒なものの一つに表(table)がある．
横に並んだものを縦にする CSS はよく目にするが，横長のものだと項目が多い場合に訳が分からなくなる．

そこで，横に長いテーブル(table)をスマホ時には横スクロールで見えるようにするテーブルの書き方を紹介してみる．
なお，この書き方だと IE11 でも動作する．

テーブル表の項目を固定して横スクロール

以下にテーブルがあるが，この画面をスマホでみるか，パソコンの場合，横幅を狭めていってほしい．

開発者ツールでスマホモードにしてみてもらってもいい．

スマホで見やすい項目固定の横スクロールテーブル解説

以下では 630px をブレイクポイントとしてスマホモードに移行している．
そのブレイクポイントを超えて狭まった時にテーブルが収まらないという値にする必要がある．

考え方としてはテーブルを div で括り，スマホではそれを overflow: auto; (scrollとほぼ同じ意味)にし，全体を margin-left で右にずらす．
最初の左端項目列だけ位置を左端にposition: absolute; で固定する．

要は基本的にはみ出た部分はスクロールするようにするが，左端の項目名だけは左端に固定した表示にして動かないようにする．他の部分に関しては margin-left で左端の項目の幅分だけ右にずらすということをしているだけ．

以下にサンプルコードを書くので参考にしてください．

サンプルコード(CSS)

<style>
.slider table {
  margin: 0 auto;
  padding: 0;
  border-collapse: collapse;
}
.slider tr th, .slider tr td {
 border: 1px solid #999;
}
.slider th, .slider td {
  padding: 6px;
  white-space: nowrap;
}
@media screen and (max-width: 630px) {
.slider {
  overflow: auto;
  margin-left: 66px;
}
.slider tr th:first-child,
.slider tr td:first-child {
  width: 56px;
  position: absolute;
  left: 10px;
}
</style>

サンプルコード(HTML)

<div class="slider">
  <table>
    <tr>
      <th>項目</th>
      <th>横項目1</th>
      <th>横項目2</th>
      <th>横項目3</th>
      <th>横項目4</th>
      <th>横項目5</th>
      <th>横項目6</th>
    </tr>
    <tr>
      <th>縦項目1</th>
      <td>レスポンシブ対応</td>
      <td>横スクロール</td>
      <td>テーブル</td>
      <td>スライダー</td>
      <td>スマホOK</td>
      <td>CSS</td>
    </tr>
    <tr>
      <th>縦項目2</th>
      <td>レスポンシブ対応</td>
      <td>横スクロール</td>
      <td>テーブル</td>
      <td>スライダー</td>
      <td>スマホOK</td>
      <td>CSS</td>
    </tr>
    <tr>
      <th>縦項目3</th>
      <td>レスポンシブ対応</td>
      <td>横スクロール</td>
      <td>テーブル</td>
      <td>スライダー</td>
      <td>スマホOK</td>
      <td>CSS</td>
    </tr>
  </table>
</div>