给tbody标签设置高度

发布时间 2023-09-27 13:30:31作者: yxxcl

给tbody标签设置高度/max-height

通过搜索得到三种方法

1. 在 tbody 上使用 CSS 设置高度,并给 tbody 设置 "display: block;" 属性。
2. 将 tbody 的内容放入一个 div 中,并设置 div 的高度。
3. 动态设置 tbody 的高度。

使用方法1:

`tbody{ display:block }`

此时可以给tbody设置height/max-height/overflow-auto

此时表格会变形,因此设置:

```javascript
thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
```

当设置滚动条,tbody与thead宽度不一致,若需宽度一致须减去滚动条的宽度:

```thead { width: calc( 100% - 1em ) }```

ps:

1. 使用table布局,thead与tbody是必须的,尽量 <b>不</b> 使用table布局。
2. tfoot推荐荐在html中`tfoot`是放在`thead`之后,`tbody`之前。但是渲染结果还是在最后。