Wie erstelle ich scrollbare Tabellen mit festen Überschriften mithilfe von CSS?

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 Element- und Tabellendaten innerhalb eines Element.

<div>

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 in enthalten sind. Elemente für die richtige Ausrichtung. 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.

Das obige ist der detaillierte Inhalt vonWie erstelle ich scrollbare Tabellen mit festen Überschriften mithilfe von CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!