Bagaimana Membuat Jadual Boleh Tatal dengan Pengepala Tetap Menggunakan CSS?

Cara Membuat Jadual Boleh Tatal dengan Pengepala Tetap dalam CSS

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.

Masalahnya

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.

Penyelesaian

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.

Coretan Kod

table tbody, table thead {
    display: block;
}

table tbody {
    overflow: auto;
    height: 100px;
}

th {
    width: 72px;
}

td {
    width: 72px;
}

Pertimbangan Tambahan

• Tiada HTML Elemen: Pastikan semua baris disertakan dalam elemen, termasuk baris pengepala.
• Kawalan Lebar Lajur: Untuk kawalan bernuansa ke atas lebar lajur sambil mengekalkan penjajaran, pertimbangkan untuk menggunakan kod berikut:

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 */

Kesimpulan

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!