Bagaimanakah Saya Boleh Memastikan Pengepala Jadual HTML Tetap Semasa Menatal?

Bolehkah Anda Memastikan Pengepala Jadual HTML Tetap Apabila Anda Tatal?

Jadual HTML ialah cara yang bagus untuk memaparkan data jadual. Walau bagaimanapun, apabila jadual panjang, sukar untuk menjejaki pengepala lajur. Ini benar terutamanya jika jadual lebar dan pengepala tidak kelihatan pada skrin.

Salah satu cara untuk menangani masalah ini ialah dengan membekukan pengepala lajur supaya ia kekal kelihatan walaupun semasa jadual ditatal. Ini boleh dicapai menggunakan pelbagai teknik CSS dan JavaScript.

Transformasi CSS

Jika anda hanya mementingkan penyemak imbas moden, pengepala tetap boleh dicapai dengan lebih mudah dengan menggunakan transformasi CSS. Begini caranya:

1. Tambahkan pendengar acara pada pembalut jadual. Pendengar ini akan dicetuskan apabila jadual ditatal.
2. Dapatkan nilai tatal atas pembungkus. Nilai ini mewakili bilangan piksel jadual telah ditatal secara menegak.
3. Gunakan transformasi terjemah pada pengepala jadual. Transformasi ini akan menggerakkan pengepala ke atas dengan bilangan piksel yang sama dengan jadual yang telah ditatal.

Berikut ialah kod JavaScript untuk teknik ini:

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

Berikut ialah contoh penuh untuk rujukan:

<div>

#wrap {
    width: 100%;
    height: 400px;
    overflow: auto;
}

th {
    width: 200px;
}

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

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memastikan Pengepala Jadual HTML Tetap Semasa Menatal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!