要实现“表格的 tbody 只限制在一个列的宽度上”,我们可以使用CSS样式来控制表格的布局。以下是一个代码示例:
HTML代码:
姓名
年龄
邮箱
张三
25
zhangsan@example.com
李四
30
lisi@example.com
王五
28
wangwu@example.com
CSS代码:
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
border: 1px solid black;
padding: 8px;
}
tbody {
display: block;
max-height: 200px;
overflow-y: auto;
}
thead,
tbody {
width: calc(100% - 17px); /* 减去纵向滚动条的宽度 */
}
th:first-child,
td:first-child {
width: 30%; /* 第一列宽度为30% */
}
th:nth-child(2),
td:nth-child(2),
th:nth-child(3),
td:nth-child(3) {
width: 35%; /* 第二列和第三列宽度为35% */
}
在上述代码中,我们使用了display: block
和max-height
来限制tbody的高度,并使用overflow-y: auto
来添加纵向滚动条。然后,使用calc()
函数来计算表格的宽度,确保表头和表体宽度相等。最后,通过设置每个单元格的宽度来控制列的宽度。
希望以上代码示例能够帮到您!
上一篇:表格打印的Bootstrap按钮
下一篇:表格的 TD 宽度没有更新