以下是一个解决“表格的标题固定 - 表格主体(tbody)溢出标题(thead)”的例子:
HTML代码:
标题1
标题2
标题3
标题4
内容1
内容2
内容3
内容4
CSS代码:
.table-container {
position: relative;
height: 300px; /* 设置表格容器的高度,以限制表格高度 */
overflow: auto; /* 添加滚动条 */
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
thead {
position: sticky;
top: 0; /* 将标题行固定在顶部 */
background-color: #f9f9f9;
}
在上面的例子中,我们使用了CSS的position: sticky属性将表格的标题行固定在顶部。为了限制表格的高度并添加滚动条,我们将表格放在一个容器div中,并设置其高度和overflow属性。
这样,当表格的内容过多时,只有表格主体会出现滚动条,而标题行将保持固定在顶部,始终可见。