Bagaimanakah Saya Boleh Mencipta Jadual Boleh Tatal CSS Sahaja dengan Pengepala Tetap?

Jadual Boleh Tatal CSS Sahaja dengan Pengepala Tetap

Cabaran:

Objektifnya adalah untuk mencipta jadual boleh tatal dengan tetap pengepala menggunakan CSS sahaja, memastikan keserasian merentas pelayar dan memenuhi perkara berikut kriteria:

• Kekalkan penjajaran lajur antara pengepala, pengaki dan baris kandungan
• Pastikan pengepala dan pengaki tetap semasa kandungan menatal secara menegak
• Elakkan pergantungan pada JavaScript atau jQuery
• Gunakan hanya teg jadual yang disediakan (jadual, kumpulan kol, kol, thead, tbody, tfoot, tr, th, td)

Penyelesaian Menggunakan Kedudukan: Melekit:

Sokongan untuk kedudukan: sticky perlu diperiksa sebelum melaksanakan penyelesaian ini . Mengikut W3C, kotak berkedudukan melekit terletak dalam cara yang sama dengan kotak yang agak kedudukannya. Walau bagaimanapun, pengimbangan dikira secara relatif kepada moyang terdekat dengan kotak tatal atau port pandangan jika tiada moyang mempunyai kotak tatal.

Tingkah laku ini sejajar dengan pengepala statik. Tetapkan sifat kedudukan melekit kepada elemen sel jadual (th). Memandangkan jadual bukan elemen blok yang menghormati saiz yang ditetapkan, elemen pembalut digunakan untuk menentukan limpahan tatal.

Contoh:

div {
  display: inline-block;
  height: 150px;
  overflow: auto
}

table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

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