如何使 HTML 表格标题在滚动时保持可见？

使用包装 Div 在 HTML 表格上显示滚动条

创建 HTML 表格时，可能需要显示滚动条即使表格大小超过其容器，也允许查看表格的内容。

要实现此目的，请换行非静态定位的

<div> 内的表格元素并为其分配一个 Overflow:auto CSS 属性。这将为表格内容创建一个可滚动区域。

要在滚动时保持表格标题（位于 部分）可见，请将它们绝对定位并将它们放在滚动区域的顶部。这可以防止标题被可滚动内容隐藏。

下面是一个包含滚动条和固定标题的示例：

CSS:

#table-wrapper {
  position: relative;
}
#table-scroll {
  height: 150px;
  overflow: auto;
  margin-top: 20px;
}
#table-wrapper table {
  width: 100%;
}
#table-wrapper table * {
  background: yellow;
  color: black;
}
#table-wrapper table thead th .text {
  position: absolute;
  top: -20px;
  z-index: 2;
  height: 20px;
  width: 35%;
  border: 1px solid red;
}

HTML:

<div>

通过应用此技术，您可以创建一个允许滚动同时保持可见标题的 HTML 表格，如如用户提供的示例所示。

以上是如何使 HTML 表格标题在滚动时保持可见？的详细内容。更多信息请关注PHP中文网其他相关文章！