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

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

問題

データを整理して表示したい場合では、固定ヘッダーと固定最初の列の両方を備えた HTML テーブルを作成することを目的としています。しかし、調査の結果、JavaScript または jQuery に依存するさまざまなソリューションが明らかになり、理想的とは言えないスクロール動作によってモバイル ブラウザーに潜在的な欠点が生じています。したがって、現在は純粋な CSS ソリューションを見つけることが中心となります。

ソリューション

幸いなことに、Chrome、Firefox、Edge の最新バージョンでサポートされている Position: Sticky プロパティは、次の方法を提供します。望ましい動作を実現します。これを overflow:scroll プロパティと組み合わせて、固定ヘッダーと列要素を持つ動的なテーブルを作成できます。

ステップ

1. コンテナ: テーブルを配置することから始めます。親 div 内でオーバーフローを適用: div までスクロールし、スクロールを有効にします。
2. ヘッダーと列のスティッキー性: 位置: スティッキー プロパティを上、右、または左の値とともに利用して、テーブル要素がどの端に固着するかを指定します。
3. 最初の列ヘッダーのスティッキー性: 使用します。プロパティ thead th:first-child を使用して、最初の列のヘッダーが左側に固定されるようにします。 edge.

例

HTML マークアップ:

<div class="container">
  <table>
    <thead>
      <tr>
        <th></th>
        <th>headheadhead</th>
        <th>headheadhead</th>
        <th>headheadhead</th>
        <th>headheadhead</th>
        <th>headheadhead</th>
        <th>headheadhead</th>
        <th>headheadhead</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
    </tbody>
  </table>
</div>

CSS:

div {
  max-width: 400px;
  max-height: 150px;
  overflow: scroll;
}

thead th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0;
}

tbody th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  left: 0;
}

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

thead th {
  background: #000;
  color: #FFF;
  z-index: 1;
}

tbody th {
  background: #FFF;
  border-right: 1px solid #CCC;
  box-shadow: 1px 0 0 0 #ccc;
}

table {
  border-collapse: collapse;
}

td,
th {
  padding: 0.5em;
}

この実装により、ヘッダーと最初の列を維持したまま、垂直方向と水平方向の両方にスクロールできます。表形式のデータを表示する際のユーザー エクスペリエンスが向上しました。

以上がCSS のみを使用して固定ヘッダーと固定最初の列のテーブルを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。