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

テーブル内がスクロールするときに、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;） by Masakazu Saito (@31mskz10) on CodePen.

ただ、ここまでやってしまうと<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;） by Masakazu Saito (@31mskz10) on CodePen.

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