CSS のみを使用して、固定ヘッダーと固定最初の列を持つテーブルを作成するにはどうすればよいですか?

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

JavaScript を使用せずに固定ヘッダーと固定最初の列を持つテーブルを作成するには、次のような課題があります。モバイルブラウザ。この記事では、この機能を効果的に実現する純粋な CSS ベースのソリューションについて説明します。

CSS Sticky Positioning を使用したソリューション:

最新の Web ブラウザは、position: Sticky プロパティをサポートしています。要素を、それを含むブロックの水平方向 (左/右) または垂直方向 (上/下) の特定の端に貼り付けることができます。このプロパティを活用することで、テーブル ヘッダーと最初の列を固定することができます。

実装の手順:

1. コンテナの作成: を処理するコンテナ要素内にテーブルを配置します。スクロール。
2. コンテナのスクロールを有効にする: オーバーフローを指定します: コンテナをスクロールして、水平/垂直スクロールを有効にします。
3. ヘッダーと最初の列のセルを貼り付ける: テーブルのヘッダー (thead th) を上部に固定し、最初の列のセル (tbody) に固定位置を使用します。 th) 左に固定します。
4. 左列のヘッダーを固定: 最初の列のヘッダー セルが固定されたままになるようにするには、先頭に left: 0 と z-index: 2 を設定します。 th:第一子。 Z インデックスは、ヘッダー セルが tbody 番目のスタイルでエミュレートされた境界線の上に確実に配置されるようにするために使用されます。
5. 最初の列の境界線をエミュレートする: ブラウザーは、スティッキー要素の境界線を削除する傾向があります。これに対処するために、ボディ上で box-shadow を使用してボーダー右をエミュレートします。

CSS コード:

/* Enable scrolling on container */
div.container {
  max-width: 400px;
  max-height: 150px;
  overflow: scroll;
}

/* Stick header cells to top */
thead th {
  position: sticky;
  top: 0;
}

/* Stick first column cells to left */
tbody th {
  position: sticky;
  left: 0;
}

/* Stick first column header cell on the left */
thead th:first-child {
  left: 0;
  z-index: 2;
}

/* Emulate border for first column */
tbody th {
  border-right: 1px solid #CCC;
  box-shadow: 1px 0 0 0 #ccc;
}

結論:

スクロールコンテナとスティッキー配置を組み合わせることで、固定テーブルを作成できますJavaScript に依存せずにヘッダーと最初の列を修正しました。このソリューションは最新のブラウザで広くサポートされており、デスクトップとモバイル デバイスの両方でスムーズなスクロール エクスペリエンスを提供します。

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