Bagaimana untuk Mencipta Pengepala Jadual Melekit dengan `kedudukan: melekat;`?

Tajuk Meja Melekit dengan Kedudukan: Melekit

Kedudukan: melekit; hartanah baru-baru ini telah dilaksanakan dalam Webkit, menawarkan cara yang mudah untuk mencipta elemen yang kekal tetap dalam bekas induknya semasa halaman menatal. Walaupun ciri ini pada mulanya berfungsi hanya dalam elemen induk langsung, ia kini menyokong penatalan dalam jadual.

Soalan:

Bagaimana saya boleh menggunakan kedudukan: sticky; harta untuk membetulkan pengepala jadual apabila menatal dalam bekas div?

Jawapan:

Kedudukan melekit pada iklan berfungsi dengan mudah pada 2018! Hanya tambahkan peraturan CSS berikut:

<code class="css">thead th { position: sticky; top: 0; }</code>

Untuk menggunakan pengepala melekit, jadual anda mesti mengandungi elemen iklan dan ke.

<code class="html"><table>
    <thead>
        <tr>
            <th>column 1</th>
            <th>column 2</th>
            <th>column 3</th>
            <th>column 4</th>            
        </tr>    
    </thead>
    <tbody>
      // your body code
    </tbody>
</table></code>

Jika iklan anda mengandungi berbilang baris, anda boleh menentukan gelagat melekit untuk baris pertama:

<code class="css">thead tr:first-child th { position: sticky; top: 0; }</code>

Sehingga Mac 2018, pengepala melekit disokong dalam kebanyakan penyemak imbas moden. Rujuk https://caniuse.com/#feat=css-sticky untuk maklumat keserasian penyemak imbas terkini.

Kredit untuk penyelesaian ini diberikan kepada @ctf0, yang mengongsinya dalam ulasan pada 3 Disember 2017.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Pengepala Jadual Melekit dengan `kedudukan: melekat;`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!