WebDesigner's Memorandumウェブデザイナーの備忘録

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

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

テーブル内がスクロールするときに、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>を使う意味・必要がなくなってしまいます。
また、theadtbodyの横幅を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>も含めた値を入力する必要があります。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね