CSS を使用して固定ヘッダーを持つスクロール可能なテーブルを作成する方法

CSS で固定ヘッダーを使用してスクロール可能なテーブルを作成する方法

スクロール可能な本文を維持しながら固定ヘッダーを使用してテーブルを拡張することは、Web 開発における一般的な要件です。この記事では、CSS を使用した包括的なソリューションについて詳しく説明します。

問題

指定されたシナリオでは、スクロール可能なコンテナー内のテーブルは、スクロール時にヘッダーを保持するのに苦労します。根本的な問題は、ヘッダーと本文が密接にリンクされており、それらが一緒にスクロールすることに起因しています。

解決策

この問題を解決する鍵は、テーブルのヘッダー ( ) の本体 (

) から。両方の要素に display: block を設定することで、それらの固有の接続が解除され、独立して機能できるようになります。

本文にスクロール機能を導入するには、overflow: auto を割り当て、目的の高さを指定します。さらに、スクロール中にヘッダーがずれないようにするには、CSS を使用してヘッダーの幅を修正します。

コード スニペット

その他の考慮事項

• HTML が欠落している要素: すべての行が で囲まれていることを確認します。
• 列幅制御: 配置を維持しながら列幅を微妙に制御するには、次のコードの使用を検討してください:

結論

テーブルのヘッダーと本文を分離し、前述の CSS プロパティを実装することで、次のようなスクロール可能なテーブルを作成することができました。ヘッダーを修正し、元のクエリの要件を満たしました。

以上がCSS を使用して固定ヘッダーを持つスクロール可能なテーブルを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。