固定ヘッダーを持つ CSS のみのスクロール可能なテーブルを作成するには?

固定ヘッダーを持つ CSS のみのスクロール可能なテーブル

この質問では、ユーザーは CSS を使用して固定ヘッダーとフッターを持つスクロール可能なテーブルを作成しようとしていますのみ。具体的な要件には次のものが含まれます。

• ヘッダー、フッター、およびコンテンツ行間の列の配置を維持する
• コンテンツを垂直方向にスクロールできるようにしながらヘッダーとフッターを固定する
• HTML テーブル タグと CSS ルールのみを使用してこれを実現します
• クロスブラウザーの確保互換性

回答

考えられる解決策の 1 つは、position: Sticky プロパティを利用することです。 W3C によると、position: Sticky は、スクロール ボックスを使用する祖先、または祖先がスクロールしない場合はビューポートを基準とした要素の位置を定義します。

ただし、特定のブラウザー (Chrome、IE、Edge など) では問題が発生しています。位置を割り当てるとき: テーブルのヘッダー行 ( または ) に固定されます。テーブルに有効と思われる別のアプローチは、テーブルのセル () に割り当てることです。

望ましい効果を達成するには、ユーザーは次のコードを検討できます:

div {
  display: inline-block;
  height: 150px;
  overflow: auto
}

table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

このコードは、overflow: auto を使用してテーブルを div でラップし、スクロール可能な領域を確立します。テーブル ヘッダーには固定位置が割り当てられ、コンテンツが垂直方向にスクロールしても固定されたままになります。

美観のための追加のスタイル

スニペットには、コンテンツを強化するための追加の CSS スタイルが含まれています。しかし、これらの美しさは、固定ヘッダーを持つスクロール可能なテーブルの主な機能には必須ではありません。

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