SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

テーブルのヘッダを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;
    }

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

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

関連するメモ

コメント