スクロール Div 内にスティッキー テーブル ヘッダーを作成するにはどうすればよいですか?

テーブルを使用したスクロール要素内のスティッキー配置

最近導入された CSS プロパティの位置: スティッキーにより、要素は親コンテナー内で固定されたままになります。スクロールしながら。ただし、テーブルを含むスクロール div 内での機能については疑問があります。

現在の状況

当初は、position:sticky のみが実行できると考えられていました。親要素内で動作します。ただし、このプロパティを使用してスクロール div 内にスティッキー テーブル ヘッダーを作成できることが判明しました。

解決策

これを実現するには、次のコードを追加するだけです。スタイルシートに次の行を追加します。

<code class="css">thead th { position: sticky; top: 0; }</code>

The そしてこのスタイルを機能させるには、要素が必要です。

複数のヘッダー行

<code class="css">thead tr:first-child th { position: sticky; top: 0; }</code>

テーブルの に複数の行がある場合、最初の行をスティッキーにすることができます次のコードを使用します:

ブラウザ サポート

2018 年 3 月現在、position: Sticky のサポートは最新のブラウザ全体に広まっています。最新の互換性情報は https://caniuse.com/#feat=css-sticky で確認できます。

クレジット

この発見のクレジットは @ に送られます。 ctf0 は、2017 年 12 月にこのテクニックを共有しました。

以上がスクロール Div 内にスティッキー テーブル ヘッダーを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。