CSS/Tutorials/Tabelle mit festem Kopf

Aus SELFHTML-Wiki
< CSS‎ | Tutorials
Wechseln zu: Navigation, Suche

In längeren Tabellen soll der Tabellenkopf beim Scrollen stets sichtbar bleiben. Dies können Sie einfach und ohne JavaScript mit position: sticky erreichen:

Elemente mit der Eigenschaft position: sticky behalten ihre Position im Elementfluss, bis sie das obere oder untere Seitenende erreichen und dort „kleben“ bleiben.

  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari

Details: caniuse.com



Beispiel: Tabelle mit festem Kopf ansehen …
thead th
{
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	background: white;
}
Mit diesem CSS wird dafür gesorgt, dass die Tabelle beim Scrollen ihren Tabellenkopf stets sichtbar anzeigt. Wenn zum weiter unterliegenden Absatz weitergescrollt wird, verschwindet der Tabellenkopf aber wieder.
Beachten Sie: Da es im IE Edge und im Chrome zu einem Bug kommt, der diesen Wert für thead nicht zulässt, legen wir in diesem Beispiel den Regelsatz für thead th fest.