So erstellen Sie scrollbare Tabellen mit CSS und festen Überschriften

In der Webentwicklung ist es oft notwendig, Tabellen mit großen Datenmengen zu erstellen erfordern Scrollen. Allerdings kann es eine Herausforderung sein, beim Scrollen durch den Tabellenkörper eine feste Kopfzeile beizubehalten. So können Sie diesen Effekt erzielen:

HTML-Struktur

Zuerst müssen wir sicherstellen, dass unsere HTML-Struktur korrekt ist. Wir haben ein äußeres Div mit einer Bildlaufleiste, ein inneres Div, das die Tabelle enthält, und die Tabellenüberschriften sollten innerhalb eines -Elements und Tabellendaten innerhalb eines

 
CSS-Stile
Jetzt müssen wir die Tabelle mit CSS formatieren:
/* Separate header from body and allow both to scroll independently */
table tbody, table thead {
  display: block;
}

/* Enable scrolling for the table body */
table tbody {
  overflow: auto;
  height: 100px;
}

/* Fix the width of the header */
th {
  width: 72px;
}

/* Fix the width of the data cells */
td {
  width: 72px;
}
Zusätzliche Überlegungen
Stellen Sie sicher, dass alle Header- und Datenzellen für eine ordnungsgemäße Ausrichtung in 
-Elementen enthalten sind. Wenn Sie unterschiedliche Spaltenbreiten wünschen, verwenden Sie den n-ten-Kind-Selektor in CSS.
Hinweis: Dieser Ansatz eignet sich für kleinere Tabellen. Erwägen Sie bei sehr großen Tabellen die Verwendung einer anderen Technik, z. B. Virtualisierung oder eine Bibliothek eines Drittanbieters.