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

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

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

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

スライダー

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

IE11 でも動くバージョン

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

縦項目1 レスポンシブ対応 縦スクロール
項目 横項目1 横項目2
縦項目1 レスポンシブ対応 縦スクロール
縦項目2 レスポンシブ対応 縦スクロール
縦項目3 レスポンシブ対応 縦スクロール
縦項目4 レスポンシブ対応 縦スクロール
縦項目5 レスポンシブ対応 縦スクロール
縦項目6 レスポンシブ対応 縦スクロール
縦項目7 レスポンシブ対応 縦スクロール
縦項目8 レスポンシブ対応 縦スクロール

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

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

IE11 でも動くバージョン

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

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

サンプルコード(CSS)

<style>
.slider table {
  margin: -36px auto 0 auto;
  padding: 10px;
  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>

関連ページ

 

Contact

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

 
   
contact
Pagetop