Wie füge ich einer HTML-Tabelle eine Bildlaufleiste hinzu, während der Header fixiert bleibt?

Bildlaufleiste in einer HTML-Tabelle anzeigen

Um eine Bildlaufleiste in einer HTML-Tabelle anzuzeigen, sollten Sie den folgenden Ansatz in Betracht ziehen:

Umschließen Sie die Tabelle in ein positioniertes Div

Schließen Sie die Tabelle in ein div-Element mit einem ein relative oder absolute Position. Dieses Div fungiert als Container für den scrollbaren Bereich.

<div>

Setzen Sie den Überlauf für das Div auf „Auto“

Wenden Sie das CSS an Eigenschaft overflow:auto zum Container div. Dies ermöglicht den Überlauf von Inhalten, wenn die Tabelle ihre Grenzen überschreitet.

#table-container { overflow: auto; }

Tabellenkopf absolut positionieren

Um den Tabellenkopf beim Scrollen fixiert zu halten, positionieren Sie die Kopfelemente absolut.

#table-header { position : absolut; }

Höhe für den Container festlegen

Geben Sie eine Höhe für das Container-Div an, um den scrollbaren Bereich zu definieren.

#table-container { height: 400px; }

Beispielimplementierung

<div>

#table-container {
  height: 400px;
  overflow: auto;
}

#table-header {
  position: absolute;
}

Dieser Ansatz stellt eine Bildlaufleiste bereit, während der Tabellenkopf oben fixiert bleibt.

Das obige ist der detaillierte Inhalt vonWie füge ich einer HTML-Tabelle eine Bildlaufleiste hinzu, während der Header fixiert bleibt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!