Firefox/Chromeでtable要素の「position: sticky」が動作しない問題の対処
小粋空間 » Google » Google Chrome » Firefox/Chromeでtable要素の「position: sticky」が動作しない問題の対処
Firefox/Chromeでtable要素の「position: sticky」が動作しない問題の対処方法を紹介します。
１．問題点
テーブルのヘッダ部分がページの上部にさしかかると「position: sticky」で表示が固定されるサンプルを作りました。
<style>
table {
border-collapse: collapse;
width: 600px;
}
thead {
position: sticky;
top: 0px;
background: grey;
}
th, td {
border: solid 1px #00
0000;
}
</style>
<body>
<p>1</p>
<table>
<thead>
<tr>
<th>1-1</th>
<th>1-2</th>
<th>1-3</th>
</tr>
</thead>
<tbody>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
</tbody>
</table>
<p>2</p>
<table>
<thead>
<tr>
<th>2-1</th>
<th>2-2</th>
<th>2-3</th>
</tr>
</thead>
<tbody>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
</tbody>
</table>
<p>3</p>
<table>
<thead>
<tr>
<th>3-1</th>
<th>3-2</th>
<th>3-3</th>
</tr>
</thead>
<tbody>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
</tbody>
</table>
<p>4</p>
<table>
<thead>
<tr>
<th>4-1</th>
<th>4-2</th>
<th>4-3</th>
</tr>
</thead>
<tbody>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
</tbody>
</table>
</body>少し前のバージョンのFirefoxやChromeであればこれでヘッダ部分が固定されたのですが、いつの間にか固定されなくなりました。
ということで、tableで「position: sticky」を有効にする方法を調べました。
確認したブラウザのバージョンは下記です。
- Chrome：58.0.3029.110
- Firefox：53.0.3
２．tableで「position: sticky」を有効にする
tableで「position: sticky」を有効にするには、下記のCSSを追加する必要があります。
thead, tbody {
display: table;
}
th, td {
width: 200px;
}解説ですが、まずthead要素に「display: table」を追加すればヘッダは固定されるようになります。
thead {
display: table;
}ただしこれだけでは幅のレイアウトが崩れてしまうため、tbody要素にも「display: table」を追加し、さらに各th,td要素にwidthプロパティを追加してセル幅を調整します。
このサンプルでは各列のセルが均等幅なので対応できましたが、列ごとにセル幅が異なると厳しいかもしれません。
あと、firefoxでは、
table, tr {
display: table;
}も必要っぽいです。
これがないと、スクロールアップしたときに一番上のテーブルのヘッダがきれいに戻らないようです。
３．参考サイト
参考サイトは下記です。ありがとうございました。