Heim > Web-Frontend > js-Tutorial > Wie erstelle ich feste Header in HTML-Tabellen mithilfe von CSS-Transformationen?

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

Barbara Streisand
Freigeben: 2024-12-13 13:35:11
Original
897 Leute haben es durchsucht

How to Create Fixed Headers in HTML Tables Using CSS Transforms?

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;
});
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage