固定ヘッダーを持つ CSS のみのスクロール可能なテーブルを作成するにはどうすればよいですか?

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

課題:

目的は、固定ヘッダーを持つスクロール可能なテーブルを作成することです。 CSS のみを使用するヘッダー。ブラウザ間の互換性を確保し、次の条件を満たします。基準:

• ヘッダー、フッター、およびコンテンツ行間の列の配置を維持する
• コンテンツが垂直方向にスクロールする間、ヘッダーとフッターを固定したままにする
• JavaScript または jQuery への依存を避ける
• 提供されたテーブル タグ (table、colgroup、col、thead、 tbody, tfoot, tr, th, td)

Position: Sticky を使用したソリューション:

position: Sticky のサポートは、このソリューションを実装する前にチェックする必要があります。 。 W3C に従って、スティッキー配置されたボックスは、相対的に配置されたボックスと同様の方法で配置されます。ただし、オフセットは、スクロール ボックスを持つ最も近い祖先、または祖先にスクロール ボックスがない場合はビューポートを基準にして計算されます。

この動作は、静的ヘッダーの動作と一致します。スティッキー位置プロパティをテーブルセル要素 (th) に割り当てます。テーブルは、割り当てられたサイズを尊重するブロック要素ではないため、スクロール オーバーフローを定義するためにラッパー要素が使用されます。

例:

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

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

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