Wie sorge ich dafür, dass HTML-Tabellenüberschriften beim Scrollen sichtbar bleiben?

Verwenden eines Wrapper-Div zum Anzeigen von Bildlaufleisten in HTML-Tabellen

Beim Erstellen einer HTML-Tabelle kann es erforderlich sein, Bildlaufleisten anzuzeigen Ermöglichen Sie die Anzeige des Tabelleninhalts auch dann, wenn die Tabellengröße den Container überschreitet.

Um dies zu erreichen, wickeln Sie die Tabelle nicht statisch ein positioniert <div> Element und weisen Sie ihm eine overflow:auto CSS-Eigenschaft zu. Dadurch wird ein scrollbarer Bereich für den Tabelleninhalt erstellt.

Um die Tabellenüberschriften (im Abschnitt <thead>) beim Scrollen sichtbar zu halten, positionieren Sie sie absolut und platzieren Sie sie über dem Scrollbereich. Dadurch wird verhindert, dass die Kopfzeilen durch den scrollbaren Inhalt verdeckt werden.

Hier ist ein Beispiel, das sowohl Bildlaufleisten als auch feste Kopfzeilen enthält:

CSS:

#table-wrapper {
  position: relative;
}
#table-scroll {
  height: 150px;
  overflow: auto;
  margin-top: 20px;
}
#table-wrapper table {
  width: 100%;
}
#table-wrapper table * {
  background: yellow;
  color: black;
}
#table-wrapper table thead th .text {
  position: absolute;
  top: -20px;
  z-index: 2;
  height: 20px;
  width: 35%;
  border: 1px solid red;
}

HTML:

<div>

Durch die Anwendung dieser Technik können Sie eine HTML-Tabelle erstellen, die das Scrollen ermöglicht und gleichzeitig sichtbare Kopfzeilen beibehält, wie im Beispiel gezeigt vom Benutzer bereitgestellt.

Das obige ist der detaillierte Inhalt vonWie sorge ich dafür, dass HTML-Tabellenüberschriften beim Scrollen sichtbar bleiben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!