Wie erstelle ich mithilfe von CSS-Transformationen eine HTML-Tabelle mit festen Headern?

HTML-Tabelle mit festen Überschriften

Problemstellung

Erstellen Sie eine HTML-Tabelle, in der die Spaltenüberschriften auf dem Bildschirm fixiert bleiben während Sie durch den Inhalt der Tabelle scrollen. Dies ahmt die Funktion „Fenster einfrieren“ in Microsoft Excel nach.

Lösung für moderne Browser

Mithilfe von CSS-Transformationen ist das Korrigieren des Headers für moderne Browser unkompliziert:

1. Legen Sie die Eigenschaft „transform“ für das „thead“-Element der Tabelle fest.
2. Übersetzen durch den aktuellen scrollTop-Wert.
3. Hören Sie sich das „scroll“-Ereignis für das enthaltende Element („#wrap“) an.

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

Unterstützung und Beispiel

CSS-Transformationen werden weitgehend unterstützt, mit Ausnahme von Internet Explorer 8-.

Hier ist die vollständige Beschreibung Beispiel:

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

#wrap {
  overflow: auto;
  height: 400px;
}

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

<div>

Das obige ist der detaillierte Inhalt vonWie erstelle ich mithilfe von CSS-Transformationen eine HTML-Tabelle mit festen Headern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!