How to Create a Fixed Header Scrollable Table: Two Table Approach?

How to Create a Fixed Header Scrollable Table

Creating a table with a fixed header within a scrollable div requires a creative approach. Here's how to achieve it:

The code you provided uses CSS to position the header absolutely, creating a fixed position. However, this approach limits scrolling and will break when the table exceeds the height of the scrollable div.

A better solution is to use two separate tables: one for the header and one for the data cells. The header table should be positioned statically, while the data table should be placed inside a div with a fixed height and overflow-y set to auto.

Updated Code:

<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></span></td>
          <td><span></span></td>
          <td><span></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;
}

In this approach, the static header table will always be visible, while the data table will scroll smoothly within the fixed-height scrollable div. The table-layout fixed on the data table ensures that the cells have equal width and prevents table breakage when encountering long strings. Additionally, the use of elements with text-overflow ensures that the cell contents are displayed neatly without wrapping.

This method maintains both table functionality and visual aesthetics, allowing you to create fixed-header scrollable tables effectively.

The above is the detailed content of How to Create a Fixed Header Scrollable Table: Two Table Approach?. For more information, please follow other related articles on the PHP Chinese website!