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

Mencipta Jadual Boleh Tatal dengan Pengepala Tetap Menggunakan CSS

Apabila mencipta jadual yang memerlukan penatalan disebabkan oleh data yang berlebihan, adalah berguna untuk mempunyai pengepala jadual tetap manakala baris data menatal secara bebas. Artikel ini akan menyediakan penyelesaian terperinci untuk mencapai perkara ini menggunakan CSS.

Penyelesaian

Untuk mencipta jadual boleh tatal dengan pengepala tetap, adalah penting untuk memisahkan elemen pengepala daripada baris data menggunakan <kepala> dan <tbody> tag. Penggayaan CSS kemudiannya boleh digunakan untuk mengawal kelakuan paparan dan menatal mereka.

Gaya CSS:

table tbody, table thead {
  display: block;
}

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

th {
  width: 72px;
}

td {
  width: 72px;
}

Paparan: menyekat sifat pada <thead> dan <tbody> memisahkan elemen pengepala dan badan, membolehkan mereka berkelakuan secara bebas. limpahan: auto dan ketinggian pada <tbody> dayakan menatal untuk baris data. Lebar statik ditetapkan untuk kedua-dua <th> dan <td> untuk memastikan penjajaran.

Nota: Pastikan bahawa <tr> tag digunakan untuk kedua-dua baris pengepala dan data.

Kawalan Dipertingkatkan terhadap Lebar Lajur:

Untuk jadual dengan lebar lajur yang berbeza-beza, gunakan CSS untuk menentukan lebar minimum dan maksimum :

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; }
table th:nth-child(3), td:nth-child(3) { min-width: 150px; max-width: 150px; }
table th:nth-child(4), td:nth-child(4) { min-width: 200px; max-width: 200px; }

Teknik ini menyediakan kawalan berbutir ke atas lebar lajur sambil mengekalkan penjajaran antara pengepala dan baris data.

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