Bagaimana untuk Mencipta Jadual Bootstrap 3 dengan Pengepala Tetap dan Badan Boleh Tatal?

Melaksanakan Pengepala Tetap Jadual dengan Kandungan Boleh Tatal

Dalam artikel ini, kami akan menangani cabaran mencipta jadual dengan pengepala tetap dan boleh digulir badan menggunakan Bootstrap 3. Penyelesaian yang diterokai bertujuan untuk mengekalkan estetika Bootstrap tanpa menjejaskan kefungsian.

Cabaran

Jadual Bootstrap konvensional, seperti yang ditunjukkan dalam contoh yang disediakan, mengemukakan isu dengan menetapkan ketinggian untuk badan meja. Walaupun menetapkan ketinggian kepada 10px, hasilnya tetap tidak berubah. Isu ini memerlukan pendekatan alternatif.

Pengepala Tetap dengan Kedudukan Melekit

Penyelesaian yang mudah tetapi berkesan melibatkan penggunaan kedudukan melekit CSS. Pendekatan ini melibatkan penetapan kedudukan: melekit; atas: 0; kepada elemen pengepala jadual (th), memastikan ia kekal di bahagian atas jadual. Berikut ialah pecahan pelaksanaan:

.tableFixHead          { overflow: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }

Dalam kod di atas, kami mencipta bekas dengan tableFixHead kelas, yang merangkumi limpahan: auto; untuk menjadikan jadual boleh ditatal dan ketinggian 100px untuk menentukan bahagian yang boleh dilihat. Elemen pengepala jadual diberi kedudukan: melekit; atas: 0; untuk menjadikannya tetap di bahagian atas kawasan boleh tatal.

Pendekatan ini berfungsi dengan berkesan dalam penyemak imbas moden seperti Chrome, Firefox dan Edge.

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