Cara Membuat Jadual Boleh Tatal Pengepala Tetap: Pendekatan Dua Jadual?

Cara Membuat Jadual Boleh Tatal Pengepala Tetap

Mencipta jadual dengan pengepala tetap dalam div boleh tatal memerlukan pendekatan kreatif. Begini cara untuk mencapainya:

Kod yang anda berikan menggunakan CSS untuk meletakkan pengepala secara mutlak, mewujudkan kedudukan tetap. Walau bagaimanapun, pendekatan ini mengehadkan penatalan dan akan pecah apabila jadual melebihi ketinggian div boleh ditatal.

Penyelesaian yang lebih baik ialah menggunakan dua jadual berasingan: satu untuk pengepala dan satu untuk sel data. Jadual pengepala hendaklah diletakkan secara statik, manakala jadual data hendaklah diletakkan di dalam div dengan ketinggian tetap dan limpahan-y ditetapkan kepada auto.

Kod Kemas Kini:

<div class="table-wrapper">
  <table class="table-header">
    <thead>
      <tr>
        <th>Order ID</th>
        <th>Order Date</th>
        <th>Status</th>
        <th>Vol Number</th>
        <th>Bonus Paid</th>
        <th>Reason for no Bonus</th>
      </tr>
    </thead>
  </table>
  <div class="table-scroll">
    <table class="table-data">
      <tbody>
        <tr>
          <td><span><%=snd.getOrderId()%></span></td>
          <td><span><%=snd.getDateCaptured()%></span></td>
          <td><span><%=snd.getOrderStatus()%></span></td>
          <td>Data Not Available</td>
          <td>Data Not Available</td>
          <td>Data Not Available</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

.table-wrapper {
  position: relative;
  width: 100%;
}

.table-header {
  position: static;
  width: 100%;
  table-layout: fixed;
}

.table-scroll {
  height: 250px;
  width: 100%;
  overflow-y: auto;
}

.table-scroll table {
  width: 100%;
}

.table-data {
  table-layout: fixed;
}

.table-data tr td {
  padding: 5px;
  border: 1px solid #eee;
  width: 100px;
}

.table-data tr td span {
  display: inline-block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Dalam pendekatan ini, jadual pengepala statik akan sentiasa kelihatan, manakala jadual data akan menatal dengan lancar dalam div boleh tatal ketinggian tetap. Susun atur jadual yang ditetapkan pada jadual data memastikan bahawa sel mempunyai lebar yang sama dan mengelakkan pecah meja apabila menghadapi rentetan panjang. Selain itu, penggunaan elemen dengan limpahan teks memastikan kandungan sel dipaparkan dengan kemas tanpa dibalut.

Kaedah ini mengekalkan kedua-dua fungsi jadual dan estetika visual, membolehkan anda mencipta jadual boleh tatal pengepala tetap dengan berkesan.

Atas ialah kandungan terperinci Cara Membuat Jadual Boleh Tatal Pengepala Tetap: Pendekatan Dua Jadual?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!