Bagaimanakah Saya Boleh Mencipta Pengepala Jadual Melekit dalam Div Tatal?

Kedudukan Melekit dalam Elemen Tatal dengan Jadual

Kedudukan sifat CSS yang diperkenalkan baru-baru ini: sticky membenarkan elemen kekal tetap dalam bekas induknya semasa menatal. Walau bagaimanapun, terdapat persoalan mengenai kefungsiannya dalam div menatal yang mengandungi jadual.

Situasi Semasa

Pada mulanya, dianggap kedudukan itu: sticky hanya boleh bekerja dalam elemen induknya. Walau bagaimanapun, didapati bahawa sifat ini boleh digunakan untuk membuat pengepala jadual melekit dalam div menatal.

Penyelesaian

Untuk mencapai ini, cuma tambah yang berikut baris ke helaian gaya anda:

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

dan elemen diperlukan untuk penggayaan ini berfungsi.

Berbilang Baris Pengepala

Jika jadual anda mempunyai berbilang baris dalam , anda boleh menjadikan baris pertama melekit dengan menggunakan kod berikut:

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

Sokongan Penyemak Imbas

Sehingga Mac 2018, sokongan untuk position: sticky tersebar luas di seluruh penyemak imbas moden. Anda boleh menyemak maklumat keserasian terkini di https://caniuse.com/#feat=css-sticky.

Kredit

Kredit untuk penemuan ini diberikan kepada @ ctf0, yang berkongsi teknik ini pada Disember 2017.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Pengepala Jadual Melekit dalam Div Tatal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!