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
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!