# スクロールしてもテーブルヘッダーが追尾するテーブルの作り方

URL: https://webrandum.net/thead-sticky-table/
公開日: 2020-10-25
更新日: 2020-10-25
カテゴリー: コーディング
タグ: CSS
出典: Webrandum（著者: サイトウ マサカズ）

テーブル内がスクロールするときに、theadを追尾させたいときがあります。

JavaScriptを使って実装する方法もあると思いますが、今回はCSSのみを使って、追尾するテーブルの作り方をまとめておきます。

## 追尾テーブルの作り方

追尾テーブルを作る方法は下記の2パターンあります。

1. `<thead>`と`<tbody>`に`display: block;`を指定して、テーブルではなくす方法
2. `<thead>`内の`<th>``<td>`に`position: sticky;`を指定する方法

それぞれメリット・デメリットがあり、ネット上を見ていると1の方法を紹介しているサイトが多いのですが、IE11の対応を無視してもいいか、Polyfillを入れていいのであれば、2の方がラクです。

### display: blockを使用する方法

- メリット テーブルではなくなるので、通常のblockと同じような扱いができる

- デメリット `<tbody>`に対して`overflow-x`を指定して横スクロールしても、`<thead>`はそれに追尾してくれない

- `<thead>`と`<tbody>`で横幅を揃えておかないとズレる

本来`<tbody>`に対して高さや`overflow`は指定できないのですが、`display: block;`にすることで無理矢理指定できるようにしています。

```
thead{
  display: block;
}
tbody{
  display: block;
  overflow-y: auto;
  max-height: 360px;
}
```

See the Pen [テーブルヘッダー固定（display: block;）](https://codepen.io/31mskz10/pen/gOMgvBX) by Masakazu Saito ([@31mskz10](https://codepen.io/31mskz10)) on [CodePen](https://codepen.io).

ただ、ここまでやってしまうと`<table>`を使う意味・必要がなくなってしまいます。

また、`thead`と`tbody`の横幅を`width`でちゃんと指定してあげないとズレてしまったりするので、扱いが大変です。

### position: stickyを使用する方法

- メリット テーブルのまま、追尾を実現できる

- デメリット 追尾時に上下の`border`が見えなくなってしまう

- `position: sticky;`がIE11に対応していないので、Polyfillの使用が必要

`position: sticky;`を使うと、要素がスクロール途中から追尾するような動きを簡単に実現できます。

それを`<thead>`内の`<th>``<td>`に指定することで追尾するようにしています。

ちなみに`<table>`の1階層上に、最大高さを指定するための`<div>`を用意してあげる必要があります。

```
.table_wrap{
  max-height: 360px;
  overflow: auto;
}
thead th, thead td{
  position: sticky;
  top: 0;
}
```

See the Pen [テーブルヘッダー固定（position: sticky;）](https://codepen.io/31mskz10/pen/oNLBqjW) by Masakazu Saito ([@31mskz10](https://codepen.io/31mskz10)) on [CodePen](https://codepen.io).

注意点として、最大高さを指定するための`<div>`には、`<thead>`も含めた値を入力する必要があります。