Bagaimana untuk Mencipta Pengepala Jadual Tetap dengan CSS?

Membetulkan Pengepala Jadual dengan CSS

Mencipta jadual dengan pengepala tetap boleh meningkatkan kebolehbacaan dan navigasi, terutamanya apabila berurusan dengan set data yang besar. Mari kita terokai cara untuk mencapai ini menggunakan CSS:

Tentukan Struktur Jadual

Jadual hendaklah mengandungi pengepala dan badan, diwakili oleh dan

elemen masing-masing. Setiap baris hendaklah berada dalam elemen, termasuk baris pengepala.

Asingkan Pengepala dan Badan

Untuk mengasingkan kandungan pengepala daripada badan, gunakan paparan: blok untuk kedua-dua iklan dan badan. Ini memisahkannya daripada reka letak jadual lalai.

Gunakan Tatal pada Badan

Tetapkan limpahan: auto pada badan untuk mendayakan tatal mendatar dan gunakan ketinggian untuk mengehadkan kawasan boleh tatal.

Tetapkan Lebar dan Penjajaran

Tetapkan lebar statik untuk kedua-dua ke dan td untuk menjajarkan lajur. Pastikan pengepala dan badan mempunyai jumlah lebar yang sama.

CSS tambahan

Untuk lebih kawalan ke atas lebar lajur, gunakan pemilih anak ke-n dengan lebar min dan maks -sifat lebar. Ini membenarkan saiz lajur yang berbeza-beza sambil mengekalkan penjajaran.

Kod Contoh

Berikut ialah coretan kod yang menunjukkan jadual dengan pengepala tetap:

table {
  width: 100%;
}

table tbody,
table thead {
  display: block;
}

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

th,
td {
  width: 100px;
}

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