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.

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>
<pre class="brush:php;toolbar:false">#table-container {
  height: 400px;
  overflow: auto;
}

#table-header {
  position: absolute;
}

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