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

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

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

Concept

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

解決策

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

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

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

Implementation

// your body code

column 1	column 2	column 3	column 4

「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 サイトの他の関連記事を参照してください。