Tabellen mit Sticky Header und Footer lassen sich jetzt einfacher erstellen

Es ist noch gar nicht so lange her, da habe ich mich im Blogbeitrag A table with both a sticky header and a sticky first column mit Sticky Headern und Footern in HTML-<table>s beschäftigt. Damals habe ich position: sticky nicht auf <thead>-, <tfoot>- oder <tr>-Elemente angewendet, weil dies zwar in Safari und Firefox funktionierte, aber nicht in Chrome. Allerdings funktionierte es für Tabellenzellen wie <th> und <td>, was eine ausreichend gute Notlösung war.

Nun, das hat sich geändert.

Ich habe über Twitter erfahren, dass Chrome in Version 91 "Tabellen neu geschrieben" hat.https://#/vTBplXWWtT

Ich habe gesehen, dass es veröffentlicht wurde, aktualisiert und einen schnellen Test gemacht. SIEHE DA STICKY TABELLEN-HEADER UND -FOOTER.@CodePen https://#/8eCP1GMer0

(Funktioniert auch in Safari und Firefox) pic.twitter.com/rBN3bXm5iD

— Chris Coyier (@chriscoyier) 4. Juni 2021

Es klingt, als wäre viel Aufwand in die vollständige Überarbeitung von Tabellen in der Rendering-Engine in Chromium geflossen, um Tabellen auf den neuesten Stand zu bringen. Es ist nicht nur die Sticky-Funktionalität, die behoben wurde, sondern alle möglichen Dinge. Ich konzentriere mich nur auf die Sticky-Funktion, da das das ist, womit ich mich beschäftigt habe.

Die wichtigste Neuerung ist meiner Meinung nach, dass <thead> und <tfoot> sticky sein können. Das scheint hier der häufigste Anwendungsfall zu sein.

table thead,
table tfoot {
  position: sticky;
}
table thead {
  inset-block-start: 0; /* "top" */
}
table tfoot {
  inset-block-end: 0; /* "bottom" */
}

Das funktioniert in allen drei großen Browsern. Möglicherweise möchten Sie clever vorgehen und sie nur bei bestimmten Mindest-Viewport-Höhen oder ähnlichem sticky machen, aber die Hauptsache ist, dass es funktioniert.

Ich habe auch mehrere Fragen zu Tabellen*spalten* gehört. Mein ursprünglicher Artikel hatte eine sticky erste Spalte (das war sozusagen der Punkt). Obwohl es ein <col>-Tag für Tabellen gibt, ist es ... seltsam. Es umschließt keine Spalten, sondern ist eher ein Zeiger, um die Spalte bei Bedarf stylen zu können. Ich sehe es kaum verwendet, aber es ist da. Auf jeden Fall können Sie <col> *nicht* position: sticky; machen, aber Sie können sticky Spalten erstellen. Sie müssen alle Zellen in dieser Spalte auswählen und sie links oder rechts anheften. Hier ist das mit logischen Eigenschaften ...

table tr th:first-child {
  position: sticky;
  inset-inline-start: 0; /* "left" */
}

Hier ist eine etwas unverschämte Tabelle, bei der der <thead>, der <tfoot> *sowie* die erste und die letzte Spalte alle sticky sind.

Ich bin sicher, man könnte damit etwas Geschmackvolles machen. Zum Beispiel vielleicht

Eine `sticky` Tabellenzeile/-spalte kann eine nette Geste sein. Hier ist ein Beispiel von @destroytoday https://#/uN3nIisHxF pic.twitter.com/KttE5puBqZ

— Chris Coyier (@chriscoyier) 2. Juni 2021