在 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 属性,因此需要使用兼容性代码来实现,在这里不做详细说明。