Bagaimana untuk Mencipta Pengepala Tetap dalam Jadual HTML Menggunakan Transformasi CSS?

Jadual HTML dengan Pengepala Tetap?

Dengan jadual HTML yang besar, menjadi sukar untuk merujuk baris dan lajur dengan cepat disebabkan halaman menatal. Adalah berfaedah untuk menetapkan pengepala lajur di bahagian atas jadual, serupa dengan ciri "tetingkap beku" dalam Microsoft Excel.

Transformasi CSS untuk Penyemak Imbas Moden

Untuk penyemak imbas moden, transformasi CSS menawarkan penyelesaian yang mudah. Tanpa mengubah HTML atau CSS sedia ada, anda boleh melaksanakan pengepala tetap dengan hanya empat baris kod:

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

Kod ini melampirkan pendengar acara tatal pada elemen bekas ("balut" dalam contoh ini) dan secara dinamik mengemas kini transformasi CSS bagi kepala meja ("kepala") untuk memadankan kedudukan tatal menegak jadual. Ini memastikan bahawa pengepala kekal tetap di bahagian atas jadual sambil membenarkan badan menatal di bawah.

Contoh Penuh

Di bawah ialah contoh lengkap yang menunjukkan ini teknik:

<div>

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Pengepala Tetap dalam Jadual HTML Menggunakan Transformasi CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!