Bagaimanakah Saya Boleh Membekukan Pengepala Jadual HTML Menggunakan CSS dan 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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">overflow: auto;
height: 400px;

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>