Meningkatkan jadual dengan pengepala tetap sambil mengekalkan badan boleh tatal adalah keperluan biasa dalam pembangunan web. Artikel ini akan menyelidiki penyelesaian yang komprehensif menggunakan CSS.
Dalam senario yang disediakan, jadual dalam bekas boleh tatal bergelut untuk mengekalkan pengepalanya semasa menatal. Isu asas berpunca daripada pengepala dan badan yang dipaut tidak boleh dipisahkan, menyebabkan mereka menatal bersama-sama.
Kunci untuk menyelesaikan isu ini terletak pada mengasingkan pengepala jadual ( ) daripada badannya (
). Dengan menetapkan paparan: sekat untuk kedua-dua elemen, kami memutuskan sambungan intrinsiknya, membolehkannya berfungsi secara bebas.Untuk memperkenalkan keupayaan menatal pada badan, tetapkan limpahan: auto dan tentukan ketinggian yang diingini. Selain itu, untuk mengelakkan pengepala daripada hanyut semasa menatal, betulkan lebarnya menggunakan CSS.
table tbody, table thead { display: block; } table tbody { overflow: auto; height: 100px; } th { width: 72px; } td { width: 72px; }
table th:nth-child(1), td:nth-child(1) { min-width: 50px; max-width: 50px; } table th:nth-child(2), td:nth-child(2) { min-width: 100px; max-width: 100px; } /* ... and so on for each subsequent column */
Dengan mengasingkan pengepala dan badan jadual dan melaksanakan sifat CSS yang disebutkan di atas, kami berjaya mencipta jadual boleh tatal dengan pengepala tetap, memenuhi keperluan pertanyaan asal.
Atas ialah kandungan terperinci Bagaimana Membuat Jadual Boleh Tatal dengan Pengepala Tetap Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!