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

Jadual HTML dengan Pengepala Tetap

Pernyataan Masalah

Buat jadual HTML di mana pengepala lajur kekal tetap pada skrin semasa anda menatal kandungan jadual. Ini meniru ciri "tetingkap beku" dalam Microsoft Excel.

Penyelesaian Pelayar Moden

Menggunakan transformasi CSS, membetulkan pengepala adalah mudah untuk penyemak imbas moden:

1. Tetapkan sifat "transform" untuk "kepala" jadual elemen.
2. Terjemah mengikut nilai skrolTop semasa.
3. Dengar acara "skrol" pada elemen yang mengandungi ("#wrap").

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

Sokongan dan Contoh

Transformasi CSS disokong secara meluas, kecuali untuk Internet Explorer 8-.

Berikut ialah contoh penuh:

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>

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