Home >Web Front-end >CSS Tutorial >How to Create a Fixed Header Scrollable Table: Two Table Approach?

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

Susan Sarandon
Susan SarandonOriginal
2024-11-14 16:58:02532browse

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><%=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;
}

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn