CSS だけで、固定ヘッダーを備えたクロスブラウザ互換のスクロール可能なテーブルを作成できますか?

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

質問:

スクロール可能なテーブルを作成するための CSS のみのソリューションはありますかクロスブラウザーの固定ヘッダーを持つテーブル準拠していますか?

要件:

• ヘッダー、フッター、コンテンツ行間の列の配置を維持します
• ヘッダーとフッターを固定したままにしますコンテンツは垂直にスクロールします
• jQuery または JavaScript なし必須
• テーブル関連のタグ (table、thead、tbody、tr、th、td) のみを使用します

Position: Sticky:

を使用した解決策

互換性に関する注意: これを使用する前に、position:sticky のサポートを確認してください。 solution.

position:sticky は、最も近いスクロール祖先、またはスクロール祖先がない場合はビューポートを基準にして要素を配置します。この動作は、目的のスティッキー ヘッダーと一致します。

ただし、position:sticky を

、、または に割り当てると、タグはさまざまなブラウザーで問題に遭遇します。代わりに、スティッキー プロパティを

に割り当てます。スクロール オーバーフローを定義するラッパー要素内のセル。

コード:

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

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

/* Styling */
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 scope="col">head1</th>
        <th scope="col">head2</th>
        <th scope="col">head3</th>
        <th scope="col">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>
      <!-- additional rows omitted for brevity -->
    </tbody>
  </table>
</div>

以上がCSS だけで、固定ヘッダーを備えたクロスブラウザ互換のスクロール可能なテーブルを作成できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。