Bagaimana Mengekalkan Pengepala Jadual Tetap Semasa Menatal Isi dalam HTML Menggunakan CSS dan JavaScript?

Adakah terdapat teknik CSS/JavaScript penyemak imbas merentas untuk memaparkan jadual HTML yang panjang supaya pengepala lajur kekal pada skrin dan tidak menatal dengan badan jadual?

Dalam Microsoft Excel, kami sering menggunakan ciri "tetingkap beku" untuk memastikan pengepala lajur stabil semasa kami menatal kandungan jadual. Adakah terdapat teknik penyemak imbas yang serupa dalam HTML?

Menggunakan transformasi CSS, ini boleh dilakukan dengan hanya empat baris kod JavaScript:

1. Balut jadual anda dalam bekas dengan ID "balut" dan tetapkan sifat limpahannya kepada "auto".
2. Dengar acara "tatal" pada bekas.
3. Di dalam pengendali acara, hitung nilai terjemahan berdasarkan sifat scrollTop.
4. Gunakan nilai terjemahan yang dikira pada elemen tead jadual menggunakan sifat transformasi.

Pendekatan ini mempunyai kelebihan berikut:

• Bersih dan cekap, hanya menggunakan empat baris JavaScript.
• Tiada kebergantungan JavaScript luaran.
• Berfungsi dengan semua konfigurasi jadual, termasuk reka letak tetap.
• Menyokong penyemak imbas moden, termasuk Chrome, Safari, Firefox dan Edge.

Berikut ialah kod:

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

Di bawah ialah contoh lengkap untuk rujukan:

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

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

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

// HTML
<div>

Atas ialah kandungan terperinci Bagaimana Mengekalkan Pengepala Jadual Tetap Semasa Menatal Isi dalam HTML Menggunakan CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!