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

// your body code

column 1	column 2	column 3	column 4

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!