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

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

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

<table>
  <thead>
    <tr>
      <th>head1</th>
      <th>head2</th>
      <th>head3</th>
      <th>head4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row 1, cell 1</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
    </tr>
    <tr>
      <td>row 2, cell 1</td>
      <td>row 2, cell 2</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
    </tr>
  </tbody>
</table>

次に、 に 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 サイトの他の関連記事を参照してください。