テーブル本体をスクロールするときにテーブルヘッダーを固定したままにする方法は?

スクロール本文でのテーブル ヘッダーの固定

本文のスクロールを許可しながら固定テーブル ヘッダーを維持することは、Web 開発における一般的な要件です。これを実現するには、次のアプローチを採用します。

1.テーブルのコンテンツを 2 つのネストされた要素でラップします:

• テーブル全体を保持する外部テーブル要素 (例: #mainTable) を作成します。
• 内部テーブル要素 (例: #mainTable) を作成します。 、#innerTable) を含める必要があるテーブル本体を含めます。スクロールします。

2.外部テーブルの高さを設定:

• CSS を使用して外部テーブルに固定の高さを適用します (例: #mainTable { height: 500px; })。

3.内部テーブルの位置:

• CSS を使用して、内部テーブルを外部テーブル内に絶対的に配置します (例: #innerTable {position:Absolute;top:0;bottom:0;width:100%; }).

4.ヘッダーの修正:

• 適用位置: スティッキー;内部テーブルのヘッダー行 (例: #innerTable th {position: Sticky; top: 0; })。

5.スクロールを有効にする:

• 内部テーブルの高さが外部テーブルの高さを超えていることを確認し、垂直方向のオーバーフローを引き起こします。
• CSS を使用して内部テーブルのスクロールを有効にします (例: #innerTable {オーバーフロー: 自動; }).

例:

<div>

以上がテーブル本体をスクロールするときにテーブルヘッダーを固定したままにする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。