【CSS】レスポンシブ対応縦横ヘッダ固定テーブル(縦横スクロール)

スマホ表示の時に画面からはみ出る table をスライドさせる方法に関して以前に書いたが，それらは IE11 で動くようにするために面倒くさいことをしていた．

しかし，もうサポートも終了するので，IE11 は無視してもよい場合，position: sticky を使えば，もっと簡単に書ける．

IE11 で動かなくてよい縦横スライダーテーブル

こちらは position: sticky; を使ったバージョン．
今なら普通はこれを選べばよいと思う．

IE11 では position: sticky; を使えないので，polyfill を使えばよいという情報もあったが，自分で試したところ，動かなかった．

これは IE11 を除く Chrome, Firefox など通常のブラウザで動く．
この表には難しい部分がある．
table に border-collapse: collapse; を指定して，セルの枠線を重なり合わせて表示させるとスクロール時に枠線がそのままスクロールしてしまって，代わりに下にある動いているテーブルが見えてしまう．
border-collapse: separate; (デフォルト)の場合はこの問題は起きないのだが，collapase を使う場合は困ってしまう．
その場合，うまくやっている方がいた．
ありがたく，「CSSでテーブル表の一部を固定してスクロールする方法」をそのまま利用させてもらうことにした．

要は擬似要素を使って，もう一つ枠を上に作るイメージだ．
-1px というのはつまり，collapse を使っている場合，枠は th や td に存在していなくて，table の定義の中にあるということなのだろう．
0px を指定すると分かるが二重になる．つまり，外側にある枠線は th や td の border とは別物ということになる．

サンプルコード(CSS)

<style>
  .slider {
    overflow-y: auto;
    height: 200px;
    width: 500px;
    margin: 0 auto;
  }
  .slider table {
    margin: 0 auto;
    padding: 0;
    border-collapse: collapse;
  }
  .slider th, .slider td {
    border: 1px solid #999;
    padding: 6px;
    white-space: nowrap;
  }
  .slider tr:first-child th,
  .slider tr th:first-child {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: white;
  }
  .slider tr:first-child th:first-child {
    z-index: 10;
  }
  .slider tr:first-child th:before,
  .slider tr th:first-child:before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 100%;
    height: 100%;
    border: 1px solid #999;
  }
</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>
    <tr>
      <th>縦項目4</th>
      <td>レスポンシブ対応</td>
      <td>縦横スクロール</td>
      <td>テーブル</td>
      <td>スライダー</td>
      <td>スマホOK</td>
      <td>CSS</td>
    </tr>
    <tr>
      <th>縦項目5</th>
      <td>レスポンシブ対応</td>
      <td>縦横スクロール</td>
      <td>テーブル</td>
      <td>スライダー</td>
      <td>スマホOK</td>
      <td>CSS</td></tr>
    <tr>
      <th>縦項目6</th>
      <td>レスポンシブ対応</td>
      <td>縦横スクロール</td>
      <td>テーブル</td>
      <td>スライダー</td>
      <td>スマホOK</td>
      <td>CSS</td>
      </tr>
    <tr>
      <th>縦項目7</th>
      <td>レスポンシブ対応</td>
      <td>縦横スクロール</td>
      <td>テーブル</td>
      <td>スライダー</td>
      <td>スマホOK</td>
      <td>CSS</td>
    </tr>
    <tr>
      <th>縦項目8</th>
      <td>レスポンシブ対応</td>
      <td>縦横スクロール</td>
      <td>テーブル</td>
      <td>スライダー</td>
      <td>スマホOK</td>
      <td>CSS</td>
    </tr>
  </table>
</div>