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>
Berbilang Baris Pengepala Jika jadual anda mempunyai berbilang baris dalam , anda boleh menjadikan baris pertama melekit dengan menggunakan kod berikut:
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! elemen diperlukan untuk penggayaan ini berfungsi.
<code class="css">thead tr:first-child th { position: sticky; top: 0; }</code>