Wie halte ich Tabellenüberschriften beim Scrollen mit CSS fest?

Sticky CSS für Tabellenkopf – Chrome, FF, Edge

Wenn Sie eine Tabelle haben, in der die im Tabellenkörper enthaltenen Daten überlaufen können, und Sie den Tabellenkopf möchten Um im Blick zu bleiben, können Sie CSS verwenden. Eine einfache Lösung, die nur ein wenig CSS erfordert und kein JavaScript erfordert, erfordert die Verwendung von position: sticky und die entsprechende Einstellung der top-Eigenschaft.

Das folgende Beispiel verwendet eine Tabellenklasse von tableFixHead, um sicherzustellen, dass die Tabelle passt innerhalb dieses Containers, der auf Überlauf eingestellt ist: auto. Dadurch kann der Tabellenkörper innerhalb des Containers überlaufen, während die Kopfzeile stationär bleibt.

.tableFixHead          { overflow: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }

Im Inneren der Tabelle selbst können Sie sehen, dass die Tabellenkopfelemente jetzt auf Position: sticky eingestellt sind . Das heißt, wenn sie den oberen Rand des Containers erreichen, bleiben sie am oberen Rand des Containers hängen, anstatt mit den restlichen Daten zu scrollen.

<div>

Wenn Sie dieses Beispiel reproduzieren würden, würden Sie das tun Achten Sie darauf, dass die Kopfzeile beim Scrollen stationär bleibt, sodass der Benutzer die Spaltennamen der Tabellendaten leicht sehen kann.

Das obige ist der detaillierte Inhalt vonWie halte ich Tabellenüberschriften beim Scrollen mit CSS fest?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!