\'position: Sticky\' を使用して、スクロールする div 内でテーブル ヘッダーをスティッキーにできますか?

スクロール テーブル Div 内のスティッキー ヘッダー

Webkit に最近導入された 'position: Sticky' により、開発者はその潜在的な用途を模索しています。発生する 1 つの疑問は、スクロール div 内のテーブルのヘッダー (thead) を維持するために使用できるかどうかです。

Concept

デフォルトでは、'position: Sticky' は機能を親要素に制限するため、この特定のシナリオには適していません。ただし、「スティッキー配置」を利用して目的の効果を達成することは可能です。

解決策

スクロール div 内でテーブル ヘッダーをスティッキーにするには、次のようにします。スタイルシートに次の行を追加します:

thead th { position: sticky; top: 0; }

スタイルを適用するために必要な 'thead' 要素と 'th' 要素がテーブルにあることを確認します。

Implementation

<table>
    <thead>
        <tr>
            <th>column 1</th>
            <th>column 2</th>
            <th>column 3</th>
            <th>column 4</th>            
        </tr>    
    </thead>
    <tbody>
      // your body code
    </tbody>
</table>

「thead」内の複数の行の場合、これを使用して最初の行の固定性を維持します:

thead tr:first-child th { position: sticky; top: 0; }

ブラウザのサポート

2018 年 3 月の時点で、「position: Sticky」は最新のブラウザーで幅広くサポートされています: https://caniuse.com/#feat=css-sticky

Credit

このソリューションは、2017 年 12 月 3 日のコメントで @ctf0 によって最初に提案されました。

以上が\'position: Sticky\' を使用して、スクロールする div 内でテーブル ヘッダーをスティッキーにできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。