CSS のみを使用してテーブルに固定ヘッダーと列を作成する方法

純粋な CSS を使用したテーブルの固定ヘッダーと列

純粋な CSS を使用して、固定ヘッダーと固定の最初の列を持つテーブルを作成すると、これは、position:sticky プロパティを使用して実現されます。このアプローチは、JavaScript や jQuery に依存するソリューションよりも効率的で、ブラウザ間互換性があります。

解決策:

1. テーブルをラップするコンテナ内:

   `

   `

2. コンテナのスクロールを有効にします:

   `div.container {
   オーバーフロー: スクロール;
   }`

3. テーブルにくっつくheader:

   `thead th {
   位置: -webkit-sticky; / Safari の場合 /
   位置: スティッキー;
   トップ: 0;
   }`

4. 最初の列をスティッキー:

   `tbody 番目の {
   の位置: -webkit-sticky; / Safari 用 /
   位置: スティッキー;
   左: 0;
   }`

5. オプション: スティッキー左上の最初の列のヘッダー:

   `thead th:first-child {
   left: 0;
   z-index: 2;
   }`

補足:

• 最適なパフォーマンスを得るには、コンテナーの幅と高さを最大にする必要がありますset.
• 最初の列に が含まれる場合
• ヘッダーと最初の列をさらにスタイル設定するには、必要に応じて CSS プロパティを調整します。

例:

<div class="container">
  <table border="1">
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>1</th>
        <td>John Doe</td>
        <td>john@example.com</td>
        <td>(555) 123-4567</td>
      </tr>
      <tr>
        <th>2</th>
        <td>Jane Smith</td>
        <td>jane@example.com</td>
        <td>(555) 234-5678</td>
      </tr>
      <!-- More rows... -->
    </tbody>
  </table>
</div>

ログイン後にコピー

div.container {
  max-width: 500px;
  max-height: 300px;
  overflow: scroll;
}

thead th {
  position: sticky;
  top: 0;
}

tbody th {
  position: sticky;
  left: 0;
}

thead th:first-child {
  left: 0;
  z-index: 2;
}

ログイン後にコピー