Bagaimana Membuat Jadual Boleh Tatal dengan Pengepala Tetap Menggunakan CSS?

Mary-Kate Olsen
Lepaskan: 2024-11-12 01:18:02
asal
182 orang telah melayarinya

How to Make a Scrollable Table with Fixed Headers Using 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;
}
Salin selepas log masuk

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 */
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan