Wie erstelle ich feste Header in HTML-Tabellen mithilfe von CSS-Transformationen?

HTML-Tabelle mit festen Überschriften?

Bei großen HTML-Tabellen wird es aufgrund der Seite schwierig, schnell auf Zeilen und Spalten zu verweisen Scrollen. Es wäre von Vorteil, die Spaltenüberschriften oben in der Tabelle zu fixieren, ähnlich der Funktion „Bereiche einfrieren“ in Microsoft Excel.

CSS-Transformationen für moderne Browser

Für moderne Browser bieten CSS-Transformationen eine unkomplizierte Lösung. Ohne das vorhandene HTML oder CSS zu ändern, können Sie feste Header mit nur vier Codezeilen implementieren:

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

Dieser Code hängt einen Scroll-Ereignis-Listener dynamisch an das Containerelement („wrap“ in diesem Beispiel) an Aktualisiert die CSS-Transformation des Tabellenkopfes („thead“), sodass sie mit der vertikalen Bildlaufposition der Tabelle übereinstimmt. Dadurch wird sichergestellt, dass die Kopfzeilen oben in der Tabelle fixiert bleiben, während der Hauptteil nach unten scrollen kann.

Vollständiges Beispiel

Unten finden Sie ein vollständiges Beispiel, das dies demonstriert Technik:

<div>

Das obige ist der detaillierte Inhalt vonWie erstelle ich feste Header in HTML-Tabellen mithilfe von CSS-Transformationen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!