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

最終更新日: 公開日: 2021年04月

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

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

スライダー

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

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

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

項目 横項目1 横項目2 横項目3 横項目4 横項目5 横項目6
縦項目1 レスポンシブ対応 縦横スクロール テーブル スライダー スマホOK CSS
縦項目2 レスポンシブ対応 縦横スクロール テーブル スライダー スマホOK CSS
縦項目3 レスポンシブ対応 縦横スクロール テーブル スライダー スマホOK CSS
縦項目4 レスポンシブ対応 縦横スクロール テーブル スライダー スマホOK CSS
縦項目5 レスポンシブ対応 縦横スクロール テーブル スライダー スマホOK CSS
縦項目6 レスポンシブ対応 縦横スクロール テーブル スライダー スマホOK CSS
縦項目7 レスポンシブ対応 縦横スクロール テーブル スライダー スマホOK CSS
縦項目8 レスポンシブ対応 縦横スクロール テーブル スライダー スマホOK CSS

これは 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>
    <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>

関連ページ

 

Contact

ご質問等ありましたら,下のフォームからお願いします.

 
   
contact
Pagetop