CSSを使用してスクロール中にテーブルヘッダーを固定しておくにはどうすればよいですか?

テーブル ヘッド用のスティッキー CSS - Chrome、FF、Edge

テーブル本体に含まれるデータがオーバーフローする可能性があるテーブルがあり、テーブル ヘッダーが必要な場合表示されたままにするには、CSS を使用します。 JavaScript を必要とせず、ほんの少しの CSS だけを必要とする単純なソリューションでは、position: Sticky を使用し、top プロパティを適切に設定する必要があります。

以下の例では、tableFixHead のテーブル クラスを使用して、テーブルが確実に適合するようにします。オーバーフロー: auto に設定されているこのコンテナーの内部。これにより、ヘッダーは静止したまま、テーブルの本体がコンテナ内でオーバーフローできるようになります。

.tableFixHead          { overflow: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }

テーブル自体の内部では、テーブルの先頭の要素が Position: Sticky に設定されていることがわかります。 。これは、データがコンテナの上部に到達すると、残りのデータとともにスクロールするのではなく、コンテナの上部に固定されることを意味します。

<div>

この例を複製する場合は、次のようになります。スクロールしてもヘッダーが静止したままになり、ユーザーがテーブル データの列名を簡単に確認できるようになります。

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