ホームページ > 記事 > ウェブフロントエンド > CSS を使用して固定ヘッダーを持つスクロール可能なテーブルを作成する方法
スクロール可能な本文を維持しながら固定ヘッダーを使用してテーブルを拡張することは、Web 開発における一般的な要件です。この記事では、CSS を使用した包括的なソリューションについて詳しく説明します。
指定されたシナリオでは、スクロール可能なコンテナー内のテーブルは、スクロール時にヘッダーを保持するのに苦労します。根本的な問題は、ヘッダーと本文が密接にリンクされており、それらが一緒にスクロールすることに起因しています。
この問題を解決する鍵は、テーブルのヘッダー ( ) の本体 (
) から。両方の要素に display: block を設定することで、それらの固有の接続が解除され、独立して機能できるようになります。本文にスクロール機能を導入するには、overflow: auto を割り当て、目的の高さを指定します。さらに、スクロール中にヘッダーがずれないようにするには、CSS を使用してヘッダーの幅を修正します。
テーブルのヘッダーと本文を分離し、前述の CSS プロパティを実装することで、次のようなスクロール可能なテーブルを作成することができました。ヘッダーを修正し、元のクエリの要件を満たしました。
以上がCSS を使用して固定ヘッダーを持つスクロール可能なテーブルを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。