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

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

概要:

固定ヘッダーと固定列を持つテーブルの作成最初の列が固定されているため、表示されているビューポートを超えて広がる大規模なデータセットやテーブルを表示する場合に、安定した合理化されたユーザー エクスペリエンスを提供できます。従来、この目的には JavaScript または jQuery が使用されてきました。ただし、モバイル ブラウザではパフォーマンスの問題が発生する可能性があります。この記事では、スムーズなスクロールを維持しながらこの機能を実現する純粋な CSS ソリューションについて説明します。

CSS Sticky Positioning の使用:

CSS のposition: Sticky プロパティにより、要素を固定できます。特定の点を超えてスクロールすると、上面、横面、またはその両方が表示されます。このプロパティを適用すると、固定ヘッダーと固定列の効果を実現できます。

手順:

1. テーブルをコンテナーでラップします: テーブルを保持する div コンテナを作成します。
2. でスクロールを有効にします。コンテナ: オーバーフローを適用: スクロール;
3. ヘッダーを先頭に貼り付けます: Position: Sticky と top: 0; を使用してヘッダー行 (thead tr) を配置します。
4. 最初の列を横に貼り付けます: 最初の列のセルを配置します (tbody td:first-child または tbody th:first-child) Position: Sticky と left: 0; を使用します。
5. 外観を改善するためにスタイルを適用します: テーブル、ヘッダー、および列要素のスタイルを追加して、視覚的な魅力を高めます。

追加考慮事項:

• コンテナの寸法: スクロールを制限するために、コンテナに適切な max-width プロパティと max-height プロパティがあることを確認してください。
• z -index: z-index を使用してスティッキーの重複順序を制御します
• ブラウザのサポート: Position: Sticky プロパティは、Chrome、Firefox、Edge の最新バージョンでサポートされています。

例コード:

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

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

tbody td:first-child, tbody th:first-child {
  position: sticky;
  left: 0;
}

/* Styling */

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

tbody td, tbody th {
  padding: 0.5em;
}

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

table {
  border-collapse: collapse;
}

結論:

CSS スティッキー配置を利用することで、テーブル内の固定ヘッダーと固定最初の列の効果を実現できます。 JavaScript に頼らずに。このソリューションは、特にモバイル ブラウザーでのスムーズなスクロール パフォーマンスを保証する純粋な CSS ベースのアプローチを提供します。

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