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

レスポンシブ対応のホームページの制作で面倒なものの一つに表がある．

以前，横に長いテーブルを左端を固定してスクロール(スライド)させるテーブルの作り方は紹介したが，今度は縦に長いテーブルで上端を固定して縦にスクロール(スライド)させるテーブルの作り方を紹介しよう．
position: sticky を使えば比較的簡単に実現可能なのだが，なぜか IE でのアクセスがまだあるので，一応 IE にも対応したものを紹介する．

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

IE11 でも動くバージョン

個人的には Internet Explorer 11 はもう対応する必要はないと考えるが，なぜかまだ IE11 のアクセスがあって困っているという場合がある．
その場合に少し苦労したので，縦スライダーテーブルの書き方を紹介する．

これは IE11 を含む Chrome, Firefox など通常のブラウザで動く．

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

IE11 でも動くバージョン

IE で動かすために position: sticky を使えないのがポイント．
項目ごとに横幅を決めたくないので，一番長いテキストが入っている行を thead の最初に書いておいて，visibility: hidden で表示されないようにする．
さらに表示しない分，全体を上にあげる必要があるので，margin がマイナスの値になっている．

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

サンプルコード(CSS)

<style>
.slider table {
  margin: -36px auto 0 auto;
  padding: 0;
  border-collapse: collapse;
}
.slider thead, tbody {
  display: block;
}
.slider tbody {
  overflow-y: scroll;
  height: 140px;
}
.slider th, .slider td {
  padding: 6px;
  white-space: nowrap;
}
.slider tbody th, .slider tbody td {
  border: 1px solid #999;
}
.slider thead tr:first-child {
  visibility: hidden;
}
.slider thead tr:first-child th {
  border-left: 1px solid #FFF;
  border-right: 1px solid #FFF;
}
.slider thead tr:nth-child(2) th,
.slider thead tr:nth-child(2) td {
  border: 1px solid #999;
}
</style>

サンプルコード(HTML)

<div class="slider">
  <table>
    <thead>
      <tr>
        <th>縦項目1</th>
        <td>レスポンシブ対応</td>
        <td>縦スクロール</td>
      </tr>
      <tr>
        <th>項目</th>
        <th>横項目1</th>
        <th>横項目2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>縦項目1</th>
        <td>レスポンシブ対応</td>
        <td>縦スクロール</td>
      </tr>
      <tr>
        <th>縦項目2</th>
        <td>レスポンシブ対応</td>
        <td>縦スクロール</td>
      </tr>
      <tr>
        <th>縦項目3</th>
        <td>レスポンシブ対応</td>
        <td>縦スクロール</td>
      </tr>
      <tr>
        <th>縦項目4</th>
        <td>レスポンシブ対応</td>
        <td>縦スクロール</td>
      </tr>
      <tr>
        <th>縦項目5</th>
        <td>レスポンシブ対応</td>
        <td>縦スクロール</td>
      </tr>
      <tr>
        <th>縦項目6</th>
        <td>レスポンシブ対応</td>
        <td>縦スクロール</td>
      </tr>
      <tr>
        <th>縦項目7</th>
        <td>レスポンシブ対応</td>
        <td>縦スクロール</td>
      </tr>
      <tr>
        <th>縦項目8</th>
        <td>レスポンシブ対応</td>
        <td>縦スクロール</td>
      </tr>
    <tbody>
  </table>
</div>