Rumah >hujung hadapan web >tutorial js >Bagaimanakah Saya Boleh Membekukan Pengepala Jadual HTML Menggunakan CSS dan JavaScript?

Bagaimanakah Saya Boleh Membekukan Pengepala Jadual HTML Menggunakan CSS dan JavaScript?

Barbara Streisandasal: 2024-12-09 00:06:13296semak imbas

How Can I Freeze HTML Table Headers Using CSS and JavaScript?

Teknik CSS dan JavaScript untuk Pengepala Jadual HTML Tetap

Keupayaan untuk membekukan tajuk lajur dalam jadual HTML, seperti yang dilihat dalam Microsoft Ciri "panes beku" Excel, sangat diingini untuk jadual lanjutan. Terdapat beberapa teknik silang penyemak imbas yang boleh mencapai kesan ini menggunakan sama ada CSS atau JavaScript.

Teknik Transformasi CSS

Untuk penyemak imbas moden, transformasi CSS menawarkan yang mudah dan penyelesaian yang berkesan:

 var translate = "translate(0," this.scrollTop "px)";<br> this.querySelector("thead").style.transform = terjemah;<br>});<br>

Kod ini mendengar acara tatal pada bekas meja dan menterjemah pengepala jadual (kepala) berdasarkan skrol kedudukan.

Kelebihan Teknik Transformasi CSS:

Kod minimum (empat baris)
Tiada kebergantungan luaran
Berfungsi dengan pelbagai konfigurasi meja (susun atur jadual)
Menyokong semua pelayar utama kecuali Internet Explorer 8-

Contoh Pelaksanaan:

 var translate = "translate(0," this.scrollTop "px)";<br> this.querySelector("thead").style.transform = translate; <br>});

 Bekas sedia ada anda </em>/</p><h1>balut {</h1><pre class="brush:php;toolbar:false">overflow: auto;
height: 400px;

}

/ CSS untuk demo /
td {

background-color: green;
width: 200px;
height: 100px;

}

<table>
    <thead>
        <tr>
            <th>Foo</th>
            <th>Bar</th>
        </tr>
    </thead>
    <tbody>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
    </tbody>
</table></p>
<p></div>

”

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membekukan Pengepala Jadual HTML Menggunakan CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css html for using class var this position transform column table td microsoft excel Translate

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimanakah Warisan JavaScript Mempengaruhi Harta Pembina dan Operator `instanceof`?Artikel seterusnya：Bagaimanakah Warisan JavaScript Mempengaruhi Harta Pembina dan Operator `instanceof`?

Artikel berkaitan

Lihat lagi