Wie kann ich die Header von HTML-Tabellen beim Scrollen fixiert halten?

Können Sie HTML-Tabellenüberschriften beim Scrollen fixiert lassen?

HTML-Tabellen sind eine großartige Möglichkeit, tabellarische Daten anzuzeigen. Bei langen Tabellen kann es jedoch schwierig sein, den Überblick über die Spaltenüberschriften zu behalten. Dies gilt insbesondere dann, wenn die Tabelle breit ist und die Kopfzeilen auf dem Bildschirm nicht sichtbar sind.

Eine Möglichkeit, dieses Problem zu lösen, besteht darin, die Spaltenüberschriften einzufrieren, sodass sie auch beim Scrollen der Tabelle sichtbar bleiben. Dies kann mit einer Vielzahl von CSS- und JavaScript-Techniken erreicht werden.

CSS-Transformationen

Wenn Sie sich nur für moderne Browser interessieren, kann ein fester Header durch die Verwendung von CSS-Transformationen viel einfacher erreicht werden. So funktioniert es:

1. Fügen Sie einen Ereignis-Listener zum Tabellen-Wrapper hinzu.Dieser Listener wird ausgelöst, wenn in der Tabelle gescrollt wird.
2. Get der scrollTop-Wert des Wrappers. Dieser Wert stellt die Anzahl der Pixel dar, um die die Tabelle gescrollt wurde vertikal.
3. Wenden Sie eine Übersetzungstransformation auf den Tabellenkopf an. Diese Transformation verschiebt den Kopf um die gleiche Anzahl von Pixeln nach oben, um die die Tabelle gescrollt wurde.

Hier ist der JavaScript-Code für diese Technik:

document.getElementById("wrap").addEventListener("scroll", function() {
   var translate = "translate(0," + this.scrollTop + "px)";
   this.querySelector("thead").style.transform = translate;
});

Hier ist ein vollständiges Beispiel dafür Referenz:

<div>

#wrap {
    width: 100%;
    height: 400px;
    overflow: auto;
}

th {
    width: 200px;
}

td {
    width: 200px;
    height: 100px;
    background-color: lightgray;
}

Das obige ist der detaillierte Inhalt vonWie kann ich die Header von HTML-Tabellen beim Scrollen fixiert halten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!