使用包装 Div 在 HTML 表格上显示滚动条
创建 HTML 表格时,可能需要显示滚动条即使表格大小超过其容器,也允许查看表格的内容。
要实现此目的,请换行非静态定位的
<div> 内的表格元素并为其分配一个 Overflow:auto CSS 属性。这将为表格内容创建一个可滚动区域。要在滚动时保持表格标题(位于 部分)可见,请将它们绝对定位并将它们放在滚动区域的顶部。这可以防止标题被可滚动内容隐藏。 下面是一个包含滚动条和固定标题的示例: CSS: HTML: 通过应用此技术,您可以创建一个允许滚动同时保持可见标题的 HTML 表格,如如用户提供的示例所示。#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;
}
<div>
以上是如何使 HTML 表格标题在滚动时保持可见?的详细内容。更多信息请关注PHP中文网其他相关文章!