要实现“表格只在主体部分滚动”的效果,可以使用CSS的overflow属性。具体的解决方法如下:
HTML代码:
CSS代码:
.table-container {
height: 300px; /* 设置表格容器的高度 */
overflow: auto; /* 使表格容器出现滚动条 */
}
在上面的代码中,我们创建了一个包含表格的容器div,并将其设置为固定的高度。然后,将容器的overflow属性设置为auto,这样当表格内容超过容器的高度时,会出现垂直滚动条。
需要注意的是,为了使滚动条只在主体部分出现而不包括表格的表头部分,可以在表格外再套一个div容器,并将其应用上述样式。这样,只有表格主体部分超过容器高度时才会出现滚动条,而表头部分则会固定在顶部。
以下是一个完整的示例代码:
HTML代码:
表头1
表头2
数据1
数据2
CSS代码:
.table-container {
height: 300px; /* 设置表格容器的高度 */
overflow: auto; /* 使表格容器出现滚动条 */
}
.table-scroll {
overflow: auto; /* 使表格主体部分出现滚动条 */
}
通过上述代码,可以实现表格只在主体部分滚动的效果。