Wie erstelle ich mithilfe von CSS einen scrollbaren Tabellenkörper mit festem Header?

Scrollbaren Tabellenkörper mit festem Kopf erstellen

Bei der Arbeit mit großen Tabellen ist es oft notwendig, den Kopf zu fixieren, während der Körper dies zulässt scrollbar sein. Auf diese Weise können Benutzer problemlos durch die Daten navigieren, ohne den Überblick über die Spaltenüberschriften zu verlieren.

Verwendung von CSS-Position: Sticky

Für moderne Browser wie Chrome, Firefox und Edge, eine einfache CSS-Lösung, kann das gewünschte Verhalten liefern. Durch Auftragen Position: klebrig; oben: 0; Zu den th-Elementen können Sie den Header oben in der Tabelle fixieren, während der tbody unabhängig scrollen kann.

.tableFixHead {
  overflow: auto;
  height: 100px;
}

.tableFixHead thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

Zusätzliches CSS

Zu Verbessern Sie das Erscheinungsbild und die Funktionalität der Tabelle und fügen Sie bei Bedarf zusätzliches CSS hinzu. Zum Beispiel:

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px 16px;
}

th {
  background: #eee;
}

HTML-Struktur

Fügen Sie innerhalb eines Div mit der Klasse „tableFixHead“ Ihre Tabelle mit den Elementen thead und tbody hinzu.

<div>

Das obige ist der detaillierte Inhalt vonWie erstelle ich mithilfe von CSS einen scrollbaren Tabellenkörper mit festem Header?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!