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

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

この質問では、固定ヘッダーを持つスクロール可能なテーブルを作成する CSS のみのソリューションが必要です。このソリューションの要件は次のとおりです。

1. ヘッダー、フッター、コンテンツ行全体で列の配置を維持する
2. コンテンツが垂直方向にスクロールする間、ヘッダーとフッターを固定したままにできる
3. JavaScript やjQuery

Position: Sticky を使用した解決策

考えられる解決策の 1 つは、position: Sticky プロパティを使用することです。その仕組みは次のとおりです。

位置の使用: スティッキー

スティッキー配置では、スクロールによって最も近い祖先に関してオフセットが計算されることを除き、要素を相対位置に割り当てます。そのような祖先が存在しない場合は、ボックスまたはビューポート。この動作は、固定テーブル ヘッダーに最適です。

コード

次のコードは、この手法を示しています。

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

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

/* == Just general styling, not relevant :) == */

table {
  border-collapse: collapse;
}

th {
  background-color: #1976D2;
  color: #fff;
}

th,
td {
  padding: 1em .5em;
}

table tr {
  color: #212121;
}

table tr:nth-child(odd) {
  background-color: #BBDEFB;
}

<div>
  <table border="0">
    <thead>
      <tr>
        <th>head1</th>
        <th>head2</th>
        <th>head3</th>
        <th>head4</th>
      </tr>
    </thead>
    <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>
    <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>
    <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>
    <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>
  </table>
</div>

このコードスニペットは、スクロールバーのあるラッパー div 内にテーブルを配置します。テーブルヘッダー内の th 要素にposition: スティッキーを割り当てると、コンテンツが垂直方向にスクロールしてもヘッダーは固定されたままになります。

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