【CSS】stickyで表のヘッダを固定する

はじめに

スクロールしても表のヘッダを指定の位置で固定化して表示させたい時はありませんか？
そんな時に便利なCSSがpotisionプロパティの sticky です。

sticky

MDNによるとstickyは「粘着位置指定」と呼ぶようです。
指定したしきい値に達するまでは相対位置指定として、しきい値に達したら固定位置指定として扱う・・・

要するに、「指定の位置までスクロールしたらそれ以降は表示位置が固定される（fixedになる）」ということです。

実装(html)

例えば、こんな表があったとします。

<table>
    <thead>
        <th>No</th>
        <th>ヘッダ1</th>
        <th>ヘッダ2</th>
        <th>ヘッダ3</th>
        <th>ヘッダ4</th>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>データ</td>
            <td>データ</td>
            <td>データ</td>
            <td>データ</td>
        </tr>
        <tr>
            <td>2</td>
            <td>データ</td>
            <td>データ</td>
            <td>データ</td>
            <td>データ</td>
        </tr>

        :
        :
        :

        <tr>
            <td>99</td>
            <td>データ</td>
            <td>データ</td>
            <td>データ</td>
            <td>データ</td>
        </tr>
        <tr>
            <td>100</td>
            <td>データ</td>
            <td>データ</td>
            <td>データ</td>
            <td>データ</td>
        </tr>
    </tbody>
</table>

データ行がNo.1から100まで存在する場合、
後半のデータを見るには大抵、スクロールさせていると思います。
その結果、表のヘッダ部分はスクロールされ見えなくなってしまいます。

スクロールしている間、ヘッダ部分が画面の上部に固定で表示されていた方が都合がいい場合があります。
そんな時に便利なのがpositionプロパティの sticky というわけです。

実装(css)

ヘッダにstickyを当てます。

th {
    position: sticky;
    top: 0;
}

画面上部0pxの位置でヘッダを固定させます。
sticky は親要素がブラウザに表示されている間、固定表示を維持します。
表の最下部までスクロールし切るとヘッダは相対表示となり見えなくなります。

注意点

• IEでは sticky が効きません。
• border-collapse: collapse が指定されている要素には sticky が効きません。

まとめ

sticky を利用することでJavaScriptでごりごり実装せずとも、スクロールに合わせて固定/相対表示を実現してくれます。
今回は表のヘッダ部分に使用しましたが、目次にも応用できます。