【CSS】レスポンシブ対応スライダーテーブル

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

そこで，横に長いテーブルをスマホ時には横スクロールで見えるようにするテーブルの書き方を紹介してみる．

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

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

項目固定の横スクロールテーブル解説

以下では 768px をブレイクポイントとしてスマホモードに移行している．

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

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

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

サンプルコード(CSS)

<style>
.slider table {
  margin: 0 auto;
  padding: 10px;
  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: 768px) {
.slider {
  overflow: auto;
  margin-left: 56px;
}
.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>