如何创建具有水平和垂直滚动条的固定标题表格？

修复了带有水平滚动条和垂直滚动条的标题表

问题：

创建一个当需要两个滚动条时，具有水平和垂直滚动条的固定标题表可能具有挑战性。当外部容器绝对定位时会出现此问题，这可能会导致垂直滚动条干扰标题，从而阻止其固定到位。

HTML:

HTML结构比较simple:

<div class="outer-container">
  <div class="inner-container">
    <div class="table-header">...</div>
    <div class="table-body">...</div>
  </div>
</div>

CSS:

CSS 样式绝对定位外部容器并处理溢出的内容：

.outer-container {
  position: absolute;
  overflow: hidden;
}

.inner-container {
  overflow-x: scroll;
}

.table-header {
  position: absolute;
  width: 100%;
}

.table-body {
  overflow-y: scroll;
  height: calc(100% - 40px); /* Adjust this value to match the height of the header */
}

解决方案：

解决这个问题的关键是处理滚动表头和表体同步。这是一个可能的解决方案：

1. 将 .table-header 的位置设置为绝对位置。这将使其保持在 .inner-container 中的位置。
2. 向 .table-body 添加滚动事件侦听器。
3. 在事件处理程序中，设置 .table- 的左偏移量header 到 .table-body 水平滚动位置的负数。这将使标题随着正文水平滚动而移动。

JavaScript/jQuery:

以下脚本可用于实现滚动同步：

$(".table-body").scroll(function() {
  $(".table-header").offset({ left: -this.scrollLeft });
});

解释：

此脚本确保当用户水平滚动 .table-body 时，.table-header 随之滚动，维持其固定不变

注意：

调整 CSS 中 .table-body 的 height 属性以匹配 .table-header 的高度。这将防止正文溢出到标题上。

以上是如何创建具有水平和垂直滚动条的固定标题表格？的详细内容。更多信息请关注PHP中文网其他相关文章！