スティッキーヘッダーと粘着性の最初の列の両方を備えたテーブル

個々のテーブルセル（<th>そして<code><td>） <code>position: sticky 。粘着性のあるテーブルヘッダーを作成するのは簡単で、多数の行をスクロールしながら見えるようにします。ただし、粘着性は垂直スクロールを超えて伸びています。水平方向の粘着性も同様に便利です。単一のテーブル内に複数の粘着性要素を持つこともできます。それぞれが異なる方向に固執したり、複数の方向に粘着性のある単一の要素もあります。

このビデオは、粘着性ヘッダーと粘着性の最初の列の両方を備えたテーブルを示しています。

主な利点？表形式データの相互参照の強化。多くのチームがいる野球スコアテーブルを想像してください。チーム名とイニング数を表示すると、スクロール中のコンテキストの損失が防止されます。

すべてのテーブルが双方向の相互参照を必要とするわけではありません。小規模な画面で列が崩壊することから多くの利点があります。

課題は、重複する要素の管理にあります。粘着セルは、コンテンツの出血を防ぐために背景を必要とし、 z-index慎重な管理を慎重にして、立ち往生したときに正しい階層化を確保します。キーはレイヤー化です：

• tbody > th細胞は、水平スクロールの安定性のために通常の細胞を超えている必要があります。
• thead > thセルは、垂直スクロールの安定性のためにtbody > thセルの上になければなりません。
• thead > th:first-child水平スクロール中に体細胞と兄弟ヘッダーの両方の上にとどまる最高のz-indexを持たなければなりません。

複雑なレイヤーパズルですが、達成可能です。

初期のデモとEstelle Weylの以前の実装については、Estelleの先進的なアプローチの証であるCameron Clarkに感謝します。

以上がスティッキーヘッダーと粘着性の最初の列の両方を備えたテーブルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。