Wie bleiben HTML-Tabellenüberschriften beim Scrollen im Hauptteil sichtbar?

So zeigen Sie die Bildlaufleiste in einer HTML-Tabelle an

Beim Erstellen von HTML-Tabellen ist es manchmal notwendig, dass die Kopfzeilen sichtbar bleiben, auch wenn der Inhalt der Tabelle gescrollt wird.

Um dies zu erreichen, hüllen Sie die Tabelle in ein nicht statisch positioniertes Div mit der CSS-Eigenschaft overflow:auto ein. Positionieren Sie dann die Elemente absolut im Tabellenkopf, wie unten gezeigt:

#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;
}

<div>

Dadurch wird eine Tabelle mit einer festen Kopfzeile und einem scrollbaren Hauptteil erstellt, ähnlich wie bei Methode 2 in der bereitgestellten URL.

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