Eine Tabelle mit einem festen Kopfzeilenbereich und einer festen ersten Spalte

Wir haben bereits behandelt, dass einzelne <table>-Zellen, <th> und <td> position: sticky sein können. Es ist ziemlich einfach, den Kopfzeilenbereich einer Tabelle beim Scrollen durch viele Zeilen am oberen Bildschirmrand haften zu lassen (wie in dieser Demo).

Aber Haftung ist nicht nur für den oberen Bildschirmrand gedacht, Sie können Elemente in jeder Scroll-Richtung haften lassen (horizontal ist genauso unterhaltsam). Tatsächlich können wir mehrere haftende Elemente in verschiedenen Richtungen innerhalb desselben Elements haben, und sogar einzelne Elemente, die in mehreren Richtungen haften.

Hier ist ein Videobeispiel einer Tabelle, die sowohl den Kopfzeilenbereich als auch die erste Spalte fixiert

Warum sollte man das tun? Speziell für tabellarische Daten, bei denen die Querverweise im Vordergrund stehen. In dieser Tabelle (die natürlich das Scoring-Baseballspiel darstellt, bei dem irgendwie 20 Teams gleichzeitig gegeneinander spielen, weil das eben so ist im Baseball) ist es „sinnvoll“, dass man nicht möchte, dass der Teamname oder die Inning-Nummer wegscrollt, da man den Kontext dessen, was man betrachtet, verlieren würde.

Nicht alle Tabellen müssen bidirektional querverweisbar sein. Viele Tabellen können auf kleinen Bildschirmen Zeilen in Blöcke aufteilen, um eine bessere Darstellung auf kleinen Bildschirmen zu erzielen.

Der hierbei angewandte „Trick“ ist teilweise die Verwendung von position: sticky;, aber für mich vielmehr die Art und Weise, wie man überlappende Elemente handhaben muss. Eine Tabellenzelle, die haftet, muss einen Hintergrund haben, da wir sonst überlappende Inhalte sehen. Sie benötigt auch eine ordnungsgemäße z-index-Behandlung, damit sie beim Fixieren über dem Element liegt, das sie überragen soll. Das scheint der kniffligste Teil zu sein.

• Stellen Sie sicher, dass die tbody>th-Zellen über den normalen Tabellenzellen liegen, damit sie beim horizontalen Scrollen oben bleiben.
• Stellen Sie sicher, dass die thead>th-Zellen darüber liegen, für vertikales Scrollen.
• Stellen Sie sicher, dass die thead>th:first-child-Zelle die allerhöchste ist, da sie über den Körperzellen und ihren Geschwisterköpfen für das horizontale Scrollen liegen muss.

Ein bisschen Tanz, aber es ist machbar.

Ein High Five an Cameron Clark, der mir per E-Mail eine Demo davon schickte und mir zeigte, wie cool das ist. Und tatsächlich, Cameron, es ist cool. Als ich das weitergab, zeigte mir Estelle Weyl eine Demo, die sie vor einigen Jahren erstellt hatte. Das passt ungefähr, Estelle ist mir immer ein paar Jahre voraus.