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

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

ヘッダーの固定:

JavaScriptを使用せずに固定ヘッダーを作成するには、position:stickyプロパティを利用できます。このプロパティは、Chrome、Firefox、Edge ブラウザの最新バージョンで要素を上部と側面に固定することをサポートします。

最初の列の固定:

最初の列を固定するには、同じposition: Stickyプロパティを使用できますが、追加のleft: 0スタイルを使用して要素を強制的に左側に固定します。 table.

実装例:

1. コンテナ内でのスクロールを可能にする overflow:scroll プロパティを使用して、コンテナ内にテーブルを配置します。
2. 次の位置を使用します: スティッキー;トップ: 0;ヘッダー行をテーブルの一番上に固定するには、要素のスタイルを設定します。
3. 位置を追加: スティッキー;左: 0;最初の列を修正するには、tbody th に追加します。
4. スティッキー ヘッダー行が他のすべての要素の上に残るようにするには、tbody th に z-index: 1 を設定します。
5. オプションで、border-right を追加します。 1px ソリッド #CCC;およびボックスシャドウ: 1px 0 0 0 #ccc;

注: このセットアップが適切に機能することを確認するには、max-width と max-height をコンテナ。

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