如何创建固定标题可滚动表：两个表方法？

如何创建固定标题可滚动表格

在可滚动 div 中创建具有固定标题的表格需要创造性的方法。以下是如何实现它：

您提供的代码使用 CSS 绝对定位标题，创建一个固定位置。但是，这种方法限制了滚动，并且当表格超过可滚动 div 的高度时就会中断。

更好的解决方案是使用两个单独的表格：一个用于标题，一个用于数据单元格。表头应该静态定位，而数据表应该放置在固定高度的 div 内，overflow-y 设置为 auto。

更新的代码：

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

在这种方法中，静态标题表将始终可见，而数据表将在固定高度的可滚动 div 内平滑滚动。数据表格固定的表格布局，保证单元格宽度相等，防止遇到长字符串时表格破损。另外，使用具有文本溢出的元素可确保单元格内容整齐显示而不会换行。

此方法保持了表格功能和视觉美观，允许您有效地创建固定标题的可滚动表格。

以上是如何创建固定标题可滚动表：两个表方法？的详细内容。更多信息请关注PHP中文网其他相关文章！