Eine Tabelle mit einem klebrigen Kopfzeile und einer klebrigen ersten Säule

Wir haben untersucht, wie einzelne Tabellenzellen (<th> Und<code><td> ) kann <code>position: sticky . Das Erstellen eines klebrigen Tischkopfs ist unkompliziert und hält ihn sichtbar, während Sie durch zahlreiche Reihen scrollen. Die Klebrigkeit erstreckt sich jedoch über vertikales Scrollen hinaus; Horizontale Klebrigkeit ist gleichermaßen nützlich. Wir können sogar mehrere klebrige Elemente in einer einzelnen Tabelle haben, die jeweils in verschiedene Richtungen kleben, oder sogar ein einzelnes Element, das in mehrere Richtungen klebt.

Dieses Video zeigt eine Tabelle mit einem klebrigen Header und einer klebrigen ersten Spalte: [Nehmen Sie hier den Videolink an - Ersetzen Sie, falls verfügbar, durch den tatsächlichen Videolink.

Der Hauptnutzen? Verbesserte Kreuzverweise in tabellarischen Daten. Stellen Sie sich einen Baseball -Score -Tisch mit vielen Teams vor. Das Aufhalten von Teamnamen und Inning -Zahlen verhindert den Kontextverlust während des Scrollens.

Nicht alle Tabellen erfordern eine bidirektionale Querverweise. Viele profitieren von der Zeile, die auf kleineren Bildschirmen zusammenbricht.

Die Herausforderung besteht darin, überlappende Elemente zu verwalten. Klebrige Zellen erfordern Hintergründe, um ein durchleuchtetem Inhalt zu verhindern, und sorgfältiges z-index -Management, um eine korrekte Schicht zu gewährleisten, wenn sie festgefahren sind. Der Schlüssel ist die Schichtung:

• tbody > th -Zellen müssen über reguläre Zellen stehen, um die horizontale Schriftrollenstabilität zu erhalten.
• thead > th Zellen müssen über die vertikalen Schriftrollenstabilität tbody > th Zellen liegen.
• thead > th:first-child muss den höchsten z-index haben und während des horizontalen Scrollens über Körperzellen und Geschwisterheellungen bleiben.

Es ist ein komplexes Puzzle, aber erreichbar.

Vielen Dank an Cameron Clark für die anfängliche Demo und Estelle Weyl für ihre frühere Implementierung-ein Beweis für Estelles zukunftsorientiertes Ansatz.

Das obige ist der detaillierte Inhalt vonEine Tabelle mit einem klebrigen Kopfzeile und einer klebrigen ersten Säule. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!