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

Cara Membuat Jadual Pengepala Tetap dengan Badan Boleh Tatal

Apabila bekerja dengan set data yang besar, selalunya perlu memaparkan jadual dengan pengepala tetap dan badan boleh tatal . Ini membolehkan pengguna menavigasi jadual dengan mudah tanpa kehilangan jejak pengepala lajur.

Malangnya, penyelesaian paling mudah untuk masalah ini sama ada tidak berfungsi dengan Bootstrap atau mengganggu penggayaan.

Kepala Meja Tetap - CSS Sahaja

Untuk Chrome, Firefox dan Edge, hanya gunakan yang berikut CSS untuk menjadikan pengepala lajur melekat pada bahagian atas jadual:

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

/* Just common table stuff. Really. */
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     { background:#eee; }

<div class="tableFixHead">
  <table border="1">
    <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>

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