テーブルのヘッダをCSSで固定する

Tweet

Category css 2020/11/17

問題

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;
    }

デモ → テーブルのヘッダを固定する

テーブルのヘッダの固定は、firefoxだとborderがなくなったり、若干問題がありますね。