Bagaimana untuk Mencipta Pengepala Tetap untuk Jadual Bootstrap 3 Hanya Menggunakan CSS?

Pengepala Tetap untuk Jadual Bootstrap

Dalam Bootstrap 3, mencipta jadual dengan pengepala tetap memerlukan penyelesaian CSS sahaja. Langkah berikut akan membimbing anda melalui proses:

1. Gunakan Kelas CSS: Tambahkan kelas CSS berikut pada jadual:

   • .tableFixHead ke div yang mengandungi
   • .tableFixHead thead th ke pengepala jadual sel

2. Penggayaan CSS: Masukkan gaya CSS berikut:

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

3. HTML Struktur: Pastikan jadual anda mempunyai HTML yang sesuai struktur:

   <div class="tableFixHead">
     <table class="table">
       <thead>
         <tr>
   <th>TH 1</th>
   <th>TH 2</th>
   </tr>
       </thead>
       <tbody>
         <tr>
   <td>A1</td>
   <td>A2</td>
   </tr>
         <tr>
   <td>B1</td>
   <td>B2</td>
   </tr>
         <tr>
   <td>C1</td>
   <td>C2</td>
   </tr>
         <tr>
   <td>D1</td>
   <td>D2</td>
   </tr>
         <tr>
   <td>E1</td>
   <td>E2</td>
   </tr>
       </tbody>
     </table>
   </div>

Dengan melaksanakan penyelesaian ini, kepala meja akan kekal tetap di bahagian atas meja, membolehkan badan ditatal secara menegak.

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