Bagaimana untuk Mencipta Jadual Boleh Tatal CSS Sahaja dengan Pengepala Tetap?

Jadual Boleh Tatal CSS Sahaja dengan Pengepala Tetap

Dalam soalan ini, pengguna berusaha untuk mencipta jadual boleh tatal dengan pengepala dan pengaki tetap menggunakan CSS sahaja. Keperluan khusus mereka termasuk:

• Memelihara penjajaran lajur antara baris pengepala, pengaki dan kandungan
• Memastikan pengepala dan pengaki tetap sambil membenarkan kandungan menatal secara menegak
• Mencapai ini semata-mata dengan teg jadual HTML dan peraturan CSS
• Memastikan keserasian merentas penyemak imbas

Jawapan

Satu penyelesaian yang mungkin adalah dengan menggunakan kedudukan: sifat melekit. Menurut W3C, position: sticky mentakrifkan kedudukan elemen berhubung dengan nenek moyangnya dengan kotak tatal atau port pandangan jika tiada tatal nenek moyang.

Walau bagaimanapun, penyemak imbas tertentu (mis., Chrome, IE, Edge) telah menghadapi masalah apabila menetapkan kedudukan: melekat pada baris pengepala jadual ( atau ). Pendekatan alternatif yang nampaknya berkesan untuk jadual adalah dengan menetapkannya kepada sel jadual ().

Untuk mencapai kesan yang diingini, pengguna boleh mempertimbangkan kod berikut:

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

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

Kod ini membungkus jadual dalam div dengan limpahan: auto untuk mewujudkan kawasan boleh tatal. Pengepala jadual diberikan kedudukan melekit, memastikan ia kekal tetap semasa kandungan menatal secara menegak.

Penggayaan Tambahan untuk Estetika

Coretan termasuk penggayaan CSS tambahan untuk meningkatkan penampilan jadual, tetapi estetika ini tidak penting untuk kefungsian utama jadual boleh tatal dengan tetap pengepala.

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