テーブルのヘッダをCSSで固定する
問題
CSSの position: sticky; で table の thead を固定したいんですけど、firefoxではうまくいくのですが、chromeではうまくいかないです。
table thead { position: sticky; top: 0; }
答え
theadを固定しようとするとうまくいかないけど、thを固定するとうまくいくかも。
table thead th{ position: sticky; position: -webkit-sticky; /* safariを考慮するなら */ top: 0; }
デモ → テーブルのヘッダを固定する
![](https://www.softel.co.jp/blogs/tech/wordpress/wp-content/uploads/2020/11/table-thead-sticky.png)
テーブルのヘッダの固定は、firefoxだとborderがなくなったり、若干問題がありますね。
コメント