f:id:maserati004:20200913232540p:plain

はじめに

データが大量にあるテーブル内でスクロールした際に、表のヘッダー部分まで一緒にスクロールされてしまうと何のデータなのかわからなくなる時があります。

今回はそれを改善するために、テーブルのヘッダー部分を固定する方法について調べたのでまとめてみました。

どうやるか

・cssの「position: sticky」を使用し要素を固定する

・その際「z-index」を使用し、z軸の表示順位を指定する

・固定する部分は背景色をつけ、通過する要素が透けて見えないようにする

コード例

<table>
  <tr>
    <th class="fixed01">見出しmmm</th>
    <th class="fixed02">見出し</th>
    <th class="fixed02">見出し</th>
    <th class="fixed02">見出し</th>
    <th class="fixed02">見出し</th>
    <th class="fixed02">見出し</th>
    <th class="fixed02">見出し</th>
    <th class="fixed02">見出し</th>
    <th class="fixed02">見出し</th>
    <th class="fixed02">見出し</th>
    <th class="fixed02">見出し</th>
  </tr>
  <tr>
    <th class="fixed02">見出し</th>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
  <tr>
    <th class="fixed02">見出し</th>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
  <tr>
    <th class="fixed02">見出し</th>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
</table>

table{
  width: 1800px;
}
th,td{
  width: 300px;
  height: 100px;
  vertical-align: middle;
  padding: 0 15px;
  border: 1px solid #ccc;
}
.fixed01,
.fixed02{
  position: sticky;
  top: 0;
  left: 0;
  color: #fff;
  background: #333;
  &:before{
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
  }
}
.fixed01{
  z-index: 2;
}
.fixed02{
  z-index: 1;
}