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

CSS を使用した固定ヘッダーを持つスクロール可能なテーブルの設定

テーブルにはスクロール可能な本体と固定ヘッダーの両方がありますが、この効果を実現する方法がわかりません。 。これを解決するには、 を使用して HTML 内のヘッダー要素とボディ要素を分離します。

head1	head2	head3	head4
row 1, cell 1	row 1, cell 2	row 1, cell 2	row 1, cell 2
row 2, cell 1	row 2, cell 2	row 1, cell 2	row 1, cell 2

次に、 に display: block を設定します。そして

動作を分離し、ヘッダーに影響を与えずに本文のスクロールを有効にします。

table tbody, table thead {
  display: block;
}

本文のオーバーフローと高さのプロパティを定義します。

table tbody {
  overflow: auto;
  height: 100px;
}

ヘッダーと本文は視覚的には分離されていますが、技術的にはリンクされているため、

の静的な幅を設定します。そして

th {
  width: 72px;
}

td {
  width: 72px;
}

<tr>
  <th>head1</th>
  <th>head2</th>
  <th>head3</th>
  <th>head4</th>
</tr>

などの適切な HTML 書式設定を忘れずに含めてください。ヘッダー行を含む各行。

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