Bitte macht Tabellenüberschriften sticky

Bitte macht Tabellenüberschriften sticky

• Im Web begegnet man häufig großen Datensätzen oder Tabellenlayouts.
• Bei Tabellen mit Hunderten von Zeilen beginnt das Problem, sobald man scrollt.
• Wenn der Tabellenkopf verschwindet, fällt es Nutzern schwer, sich zu merken, wozu jede Spalte gehört.

Fixierte Header

• Fixierte Header wirken fast wie Magie, sind aber sehr leicht umzusetzen.
• Man muss dem thead nur zwei CSS-Eigenschaften hinzufügen:
  • position: sticky;
  • top: 0;
• Mit einer weltweiten Unterstützung von rund 96 % wird sticky von vielen Browsern zuverlässig unterstützt.
• Das hilft auch dabei, die User Experience zu verbessern.

Meinung von GN⁺

• Wenn auf Websites große Tabellen verwendet werden, verbessert es die User Experience erheblich, wenn Nutzer die Überschriften der Tabelle auch beim Scrollen leicht sehen können.
• Dass sich der Tabellenkopf mit der CSS-Eigenschaft position: sticky; einfach fixieren lässt, ist für Webentwickler eine nützliche Information.
• Da diese Funktion breit unterstützt wird, können Webentwickler sie in verschiedenen Browsern zuverlässig umsetzen.

[GN⁺]

Hacker-News-Kommentare

• Sticky Header auf einer Achse ist möglich, aber es wird auf den Tag gewartet, an dem CSS dies auf beiden Achsen unterstützt: GitHub-Issue-Link
• Obwohl kaum CSS-Kenntnisse vorhanden sind, wurden funktionale Web-Apps gebaut. Kürzlich wurde versucht, bei einer Tabelle mit mehr als 20.000 Zeilen einen Sticky Header umzusetzen, aber bei Versuchen mit Bootstrap-Klassen sowie Vorschlägen von Stack Overflow, GPT und CodePen traten seltsame Nebenwirkungen auf. Mit dem CodePen aus diesem Beitrag war das Problem jedoch in 2 Minuten gelöst und wurde in Produktion übernommen. Ausdruck von Dankbarkeit.
• Es wirkt so, als müsste es einfach sein, einen Tabellenkopf mit position: sticky; zu fixieren, aber sobald man etwas mit dem Tabelleninhalt macht, treten Probleme auf. Zum Beispiel wurde eine Funktion hinzugefügt, die die Scroll-Position wiederherstellt, wenn ein Nutzer durch die Tabelle scrollt, die Seite verlässt und dann zurückkehrt. Die wiederhergestellte Position ist jedoch immer um eine Zeile nach unten verschoben. Durch den transparenten Tabellenkopf ist oben zwar die gewünschte Zeile zu sehen, aber weil der Header darüberliegt, erscheint die nächste Zeile als erste sichtbare Zeile. Wenn die Scroll-Position unter Berücksichtigung der Header-Höhe angepasst wird, funktioniert es zunächst gut, liegt aber manchmal um ein paar Pixel daneben. Der Grund ist, dass die Tabelle groß ist, deshalb je nach Scroll-Event Lazy Loading verwendet wird, und außerdem das automatische Tabellenlayout aktiv ist, wodurch Header-Zellen manchmal zu schmal werden, Wörter umbrechen und die gesamte Header-Höhe zunimmt. Die endgültige Lösung war, ein ResizeObserver für das Header-Element zu erstellen und die Scroll-Position dynamisch anzupassen, wenn sich die Höhe ändert. ResizeObserver-Dokumentation
• Wenn auch die Rahmenlinien des Tabellenkopfs fixiert werden sollen, kann folgender CSS-Code verwendet werden:

  table thead:before {
    content: '';
    position: absolute;
    width: 100%;
    top: 0;
    border-top: 2px solid;
  }
  
  table thead:after {
    content: '';
    position: absolute;
    width: 100%;
    bottom: 0;
    border-bottom: 1px solid;
  }
  

• Es wäre schön, wenn Tabellenköpfe automatisch fixiert würden. Wenn Entwickler den zusätzlichen Aufwand betreiben, <th>-Tags zu verwenden, ist es sehr wahrscheinlich, dass genau dieses Verhalten gewünscht ist.
• In der Kommandozeile ist es gut, den Header an den Standardfehler (stderr) und den Hauptteil an die Standardausgabe (stdout) zu senden. Andernfalls kann der Header beim Sortieren in die Ergebnisse geraten.
• Chrome hatte in der Vergangenheit verhindert, dass die Eigenschaft position: sticky bei <thead>- und <tr>-Elementen verwendet werden konnte: Chromium-Issue-Link
• Es wird vorgeschlagen, statt eines Sticky Headers eine begrenzte Viewport-Höhe zu verwenden, damit der Header immer sichtbar bleibt. So wird es zum Beispiel in DataGridXL gemacht: DataGridXL-Link (mit dem Hinweis, dass es vom Verfasser erstellt wurde)
• Wenn im CodePen-Beispiel top unter Berücksichtigung des Rahmens gesetzt wird (z. B. 0 statt -1px), kann verhindert werden, dass der Tabellenkörper über den Header fließt. Es werden zwei CodePen-Beispiele verglichen: ursprüngliches CodePen und verbessertes CodePen
• Manche möchten einfach sagen: „Bitte nicht tun“: Hacker-News-Diskussionslink