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

Buat Isi Jadual Boleh Tatal dengan Pengepala Tetap

Apabila bekerja dengan meja besar, selalunya menjadi perlu untuk membetulkan pengepala sambil membenarkan badan untuk boleh ditatal. Dengan cara ini, pengguna boleh menavigasi data dengan mudah tanpa kehilangan jejak tajuk lajur.

Menggunakan Kedudukan CSS: Melekit

Untuk penyemak imbas moden seperti Chrome, Firefox dan Edge, penyelesaian CSS mudah boleh memberikan tingkah laku yang diingini. Dengan menggunakan kedudukan: melekit; atas: 0; kepada elemen ke, anda boleh membuat pengepala tetap di bahagian atas jadual, sambil membenarkan badan menatal secara bebas.

.tableFixHead {
  overflow: auto;
  height: 100px;
}

.tableFixHead thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

CSS tambahan

Kepada meningkatkan penampilan dan kefungsian jadual, sertakan CSS tambahan jika perlu. Contohnya:

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px 16px;
}

th {
  background: #eee;
}

Struktur HTML

Dalam div dengan kelas "tableFixHead," tambahkan jadual anda dengan elemen thead dan tbody.

<div></div>

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