Bolehkah anda membuat pengepala jadual melekit dalam div menatal menggunakan \'position: sticky\'?

Sticky Header dalam Scrolling Table Divs

Dengan pengenalan baru-baru ini 'position: sticky' ke dalam Webkit, pembangun sedang meneroka potensi kegunaannya. Satu persoalan yang timbul ialah sama ada ia boleh digunakan untuk mengekalkan pengepala (thead) jadual dalam div menatal.

Konsep

Secara lalai, 'kedudukan: sticky' mengehadkan fungsinya kepada elemen induk, menjadikannya tidak sesuai untuk senario khusus ini. Walau bagaimanapun, adalah mungkin untuk memanfaatkan 'melekat-kedudukan' untuk mencapai kesan yang diingini.

Penyelesaian

Untuk menjadikan pengepala jadual melekit dalam div skrol, anda boleh tambahkan baris berikut dalam lembaran gaya anda:

thead th { position: sticky; top: 0; }

Pastikan jadual anda mempunyai elemen 'thead' dan 'th' yang diperlukan untuk menggunakan penggayaan.

Pelaksanaan

<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>

Untuk berbilang baris dalam 'kepala', gunakan ini untuk mengekalkan kelekitan pada baris pertama:

thead tr:first-child th { position: sticky; top: 0; }

Sokongan Penyemak Imbas

Mulai Mac 2018, 'position: sticky' mempunyai sokongan meluas merentas penyemak imbas moden: https://caniuse.com/#feat=css-sticky

Kredit

Penyelesaian ini pada mulanya dicadangkan oleh @ctf0 dalam ulasan pada 3 Disember 2017.

Atas ialah kandungan terperinci Bolehkah anda membuat pengepala jadual melekit dalam div menatal menggunakan \'position: sticky\'?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!