在 CSS 中,将 table 元素的 position 属性设置为 relative,将表头行的 position 属性设置为 sticky,并为表头行设置对应的 top 属性值。然后,在 HTML 文件中,将表格内容包裹在一个固定高度的容器中,并设置容器的 overflow-y 属性为 scroll,以实现滚动。代码示例如下:
HTML:
Header 1
Header 2
Header 3
Content 1
Content 2
Content 3
...
CSS:
.table-container {
height: 400px; /* 设定容器高度 */
overflow-y: scroll; /* 滚动 */
}
table {
position: relative; /* 设置 position 为 relative */
width: 100%;
border-collapse: collapse;
}
th {
position: sticky; /* 设置 position 为 sticky */
top: 0; /* 设定表头行的 top 值 */
background-color: #fff; /* 设置背景颜色 */
}
注意:部分浏览器不支持 sticky 属性,因此需要使用兼容性代码来实现,在这里不做详细说明。