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

So erstellen Sie scrollbare Tabellen mit festen Kopfzeilen in CSS

Das Verbessern von Tabellen mit festen Kopfzeilen bei gleichzeitiger Beibehaltung eines scrollbaren Hauptteils ist eine häufige Anforderung in der Webentwicklung. Dieser Artikel befasst sich mit einer umfassenden Lösung mithilfe von CSS.

Das Problem

Im bereitgestellten Szenario hat eine Tabelle in einem scrollbaren Container Schwierigkeiten, ihren Header beim Scrollen beizubehalten. Das zugrunde liegende Problem rührt daher, dass Kopfzeile und Hauptteil untrennbar miteinander verbunden sind, was dazu führt, dass sie zusammen scrollen.

Die Lösung

Der Schlüssel zur Lösung dieses Problems liegt in der Trennung der Kopfzeile der Tabelle ( ) aus seinem Körper (). Indem wir display: block für beide Elemente festlegen, unterbrechen wir ihre intrinsische Verbindung, sodass sie unabhängig voneinander funktionieren können.

Um dem Körper Bildlauffunktionen hinzuzufügen, weisen Sie overflow: auto zu und geben Sie eine gewünschte Höhe an. Um zu verhindern, dass der Header beim Scrollen verschiebt, korrigieren Sie außerdem seine Breite mithilfe von CSS.

Code-Snippet

table tbody, table thead {
    display: block;
}

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

th {
    width: 72px;
}

td {
    width: 72px;
}

Zusätzliche Überlegungen

• Fehlendes HTML Elemente: Stellen Sie sicher, dass alle Zeilen in eingeschlossen sind. Elemente, einschließlich der Kopfzeile.
• Spaltenbreitensteuerung: Für eine differenzierte Steuerung der Spaltenbreiten bei gleichzeitiger Beibehaltung der Ausrichtung sollten Sie den folgenden Code verwenden:

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; }
/* ... and so on for each subsequent column */

Fazit

Durch die Trennung von Tabellenkopf und -körper und die Implementierung der oben genannten CSS-Eigenschaften erstellen wir erfolgreich eine scrollbare Tabelle mit festen Header, die den Anforderungen der ursprünglichen Abfrage entsprechen.

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!