Question

我想在max-height的{{1}}表格tbody设置为overflow时强制执行auto政策，这样滚动条只会在表格显示时出现高。

有没有办法以这种方式限制tbody中table元素的高度？

我感兴趣的表被动态插入到一个较大的表中的单元格中，该表包含在Bootstrap面板容器中。执行以下类型的代码不起作用：

html = "";
html += "<p>";
html += "<table class=\"sortable target_detail_sortable\" style=\"width:100%;\" id=\"my_div_table\">";
html += "<thead>";
// populate header cells
html += "</thead>";
html += "<tbody style=\"max-height:300px; overflow:auto;\">";
// populate body cells
html += "</tbody>";
html += "</table>";
html += "</p>";
$("#my_div").html(html);

感谢任何有用的建议，谢谢！

Answer 1

您无法在任何表格元素上设置固定或最大高度。 The height property is only treated as a minimum height.

您可以将display: block添加到tbody。由于在这种情况下它不再是table-* display types之一，将使其达到高度。但是，由于tbody不再是table-row-group，因此您最终会在其中再次使用隐式表格。因此，任何其他thead，tbody或tfoot元素中的任何列都将不再与该可滚动tbody对齐。

除了列不匹配之外，这确实使得几乎在除IE之外的所有最新浏览器中都能正常工作。您应该能够自己修复剩余的问题。

我不知道如何在IE中修复它。我确实遇到过"Pure CSS Scrollable Table with Fixed Header"，但这已经过时了，因为他的两个解决方案都在IE6中运行，但在IE7和IE8中也有可怕的破坏（以不同的方式）。但是，他们做在IE的Quirks模式下工作，所以如果你迫切需要它，那可能是你唯一的选择。

将tbody限制在最大高度？

1 个答案: