Bagaimana Mengekalkan Pengepala Jadual Tetap Semasa Menatal dengan CSS?

Sticky CSS for Table Head - Chrome, FF, Edge

Apabila anda mempunyai jadual di mana data yang terkandung dalam badan jadual boleh melimpah dan anda mahukan pengepala jadual untuk kekal dalam paparan, anda boleh menggunakan CSS. Penyelesaian mudah yang hanya memerlukan sedikit CSS tanpa memerlukan JavaScript memerlukan penggunaan kedudukan: melekat dan menetapkan sifat teratas dengan sewajarnya.

Contoh di bawah menggunakan kelas jadual tableFixHead untuk memastikan jadual itu sesuai dalam bekas ini yang ditetapkan untuk melimpah: auto. Ini akan membenarkan badan jadual melimpah dalam bekas sementara pengepala kekal tidak bergerak.

.tableFixHead          { overflow: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }

Di dalam jadual itu sendiri, anda boleh melihat bahawa elemen kepala meja kini ditetapkan kepada kedudukan: melekit . Ini bermakna apabila mereka mencapai bahagian atas bekas, mereka akan melekat pada bahagian atas bekas dan bukannya menatal dengan data yang lain.

<div><p>Jika anda meniru contoh ini, anda akan lihat bahawa pengepala kekal pegun apabila menatal membolehkan pengguna melihat nama lajur data jadual dengan mudah.</p></div>

Atas ialah kandungan terperinci Bagaimana Mengekalkan Pengepala Jadual Tetap Semasa Menatal dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!