如何在 HTML 表格中正确设置溢出滚动的 body 高度？

使用溢出滚动设置 tbody 高度

使用 HTML 中的表格时，有时需要限制 tbody 元素的高度，同时启用溢出滚动。不幸的是，单独使用 tbody 上的 display:scroll 属性是不够的。

要达到所需的效果，需要组合 CSS 属性：

1.块显示：

在 tbody 上设置 display: 块，使其脱离表格流程并允许其占据自己的宽度和高度。

2.固定高度：

在 tbody 上指定高度：50px（或根据需要）来定义其高度。

3.表格行的表格显示：

在表格主体的 tr 元素上设置 display: table 以保留其类似表格的行为。

4.固定表格布局：

使用 table-layout: 固定在 thead 和 tbody tr 上，以确保单元格分布均匀。

5.调整标题宽度：

为了补偿滚动条宽度，请使用 width: calc(100% - 1em).

示例：

table, tr td {
  border: 1px solid red;
}
tbody {
  display: block;
  height: 50px;
  overflow: auto;
}
thead, tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
thead {
  width: calc(100% - 1em);
}
table {
  width: 400px;
}

注意：

最初，如果 tbody 可能不会出现滚动条内容比指定的高度短。为了确保随时出现滚动条，请在 tbody 上设置overflow-y:scroll。

此外，与网格布局或基于 JavaScript 的解决方案等其他选项相比，考虑此方法的局限性也很重要。

以上是如何在 HTML 表格中正确设置溢出滚动的 body 高度？的详细内容。更多信息请关注PHP中文网其他相关文章！