Wie erstelle ich eine scrollbare HTML-Tabelle mit festen Kopfzeilen?

Erstellen einer scrollbaren HTML-Tabelle

In HTML kann die Anzeige einer vertikal scrollbaren Tabelle durch die folgenden Schritte erreicht werden:

1. Umschließen Sie die Tabelle in ein div: Erstellen Sie ein div-Element und legen Sie seine CSS-Eigenschaften so fest, dass sie ein haben relative Position und eine feste Höhe, um den für die Tabelle verfügbaren vertikalen Platz zu begrenzen.
2. Überlauf auf „Auto“ setzen: Die Überlaufeigenschaft des Divs auf „Auto“ setzen, um vertikales Scrollen beim Tabelleninhalt zu ermöglichen überschreitet die Höhe des Div.
3. Positionierung auf Tabellenüberschriften anwenden: Wenn Sie möchten, dass die Tabellenüberschriften (thead) erhalten bleiben Beim Scrollen behoben, setzen Sie die Positionseigenschaft der Kopfelemente auf „absolut“ und positionieren Sie sie mithilfe der CSS-Eigenschaften „oben“, „links“ oder „rechts“.
4. Feste Breite für Tabellenspalten festlegen: Stellen Sie die Tabelle sicher Spalten haben eine feste Breite, um zu verhindern, dass sich ihre Größe beim Scrollen ändert.

Hier ist ein Beispiel, das diese enthält Schritte:

<div>

In diesem Beispiel hat das „table-wrapper“-Div eine feste Höhe und einen Überlauf, der auf „auto“ eingestellt ist, was vertikales Scrollen ermöglicht. Die Tabellenköpfe (thead) haben eine absolute Positionierung und sind oben fixiert, während der Tabellenkörper (tbody) die scrollbaren Daten enthält.

Durch Befolgen dieser Schritte können Sie eine HTML-Tabelle erstellen, die eine festgelegte Größe beibehält feste Kopfzeilen, während der Textkörper für unterschiedliche Datenmengen scrollen kann.

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