Wie erstelle ich mit CSS eine scrollbare Tabelle mit festen Überschriften?

Erstellen einer scrollbaren Tabelle mit festen Überschriften mithilfe von CSS

Beim Erstellen von Tabellen, die aufgrund übermäßiger Daten einen Bildlauf erfordern, kann dies hilfreich sein Der Tabellenkopf wurde korrigiert, während die Datenzeilen unabhängig voneinander scrollen. Dieser Artikel bietet eine detaillierte Lösung, um dies mithilfe von CSS zu erreichen.

Lösung

Um eine scrollbare Tabelle mit festen Kopfzeilen zu erstellen, ist es wichtig, die Kopfzeilenelemente von zu trennen die Datenzeilen mit dem und Tags. CSS-Stile können dann angewendet werden, um ihr Anzeige- und Scrollverhalten zu steuern.

CSS-Stile:

table tbody, table thead {
  display: block;
}

table tbody {
  overflow: auto;
  height: 100px;
}

th {
  width: 72px;
}

td {
  width: 72px;
}

Die Eigenschaft display: block auf und trennt die Header- und Body-Elemente, sodass sie sich unabhängig voneinander verhalten können. Überlauf: Auto und Höhe auf Aktivieren Sie das Scrollen für die Datenzeilen. Statische Breiten werden sowohl für und um die Ausrichtung sicherzustellen.

Hinweis: Stellen Sie sicher, dass die Das Tag wird sowohl für die Kopfzeile als auch für die Datenzeilen verwendet.

Erweiterte Kontrolle über Spaltenbreiten:

Für Tabellen mit unterschiedlichen Spaltenbreiten verwenden Sie CSS, um minimale und maximale Breiten anzugeben :

table th:nth-child(1), td:nth-child(1) { min-width: 50px;  max-width: 50px; }
table th:nth-child(2), td:nth-child(2) { min-width: 100px; max-width: 100px; }
table th:nth-child(3), td:nth-child(3) { min-width: 150px; max-width: 150px; }
table th:nth-child(4), td:nth-child(4) { min-width: 200px; max-width: 200px; }

Diese Technik bietet eine detaillierte Kontrolle über die Spaltenbreiten und behält gleichzeitig die Ausrichtung zwischen Kopfzeile und Daten bei Zeilen.

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