具有折叠行的 HTML 表：如果“可见性：折叠”和“溢出：自动”出现错误
Posted
技术标签:
【中文标题】具有折叠行的 HTML 表：如果“可见性：折叠”和“溢出：自动”出现错误【英文标题】：HTML Table with collapsed rows: bug if "visibility: collapse" and "overflow:auto" 【发布时间】：2021-06-07 11:28:58 【问题描述】：我有一个垂直滚动的表格。 我将一些行折叠起来并由一些脚本管理。
<html lang="en">
<head>
<style type="text/css">
table border: 1px solid black;
border-collapse: collapse;
overflow-y: scroll;
display: inline-block;
tr td border: 1px solid black;
tr.hide visibility: collapse;
</style>
</head>
<body>
<table>
<tr><td> Uno </p></td></tr>
<tr class="hide"><td> Due </p></td></tr>
<tr><td> Tre </p></td></tr>
<tr class="hide"><td> Quattro </p></td></tr>
</table>
</body>
</html>
为了允许额外的内容，我使用了overflow-y: scroll 和display: inline-block，但是由于隐藏的内容，这会在表格的最后一行之后创建一个空格。表格大小正确，但即使没有溢出，也会显示滚动条（滚动空白）。
我在 Chrome 和 Firefox 中看到了这一点。
关于如何使这些行真正不可见有什么想法吗？
【问题讨论】：
【参考方案1】：如果您希望这些行不可见，请使用
tr.hide display: none;
如果您希望这些行可见，只需使用
tr.hide display: table-row;
相关问题链接 Show/Hide Table Rows using javascript classes
【讨论】：
这行得通，它是最明显的解决方案……但“visibility:collapse”的特点是它“计算”了隐藏行的空间，并相应地格式化了表格。这意味着如果隐藏行更宽，则使用“display:none”，当我让它们可见时，表格会改变大小。猜猜我可以修复列的大小并调整隐藏的行以使其适合它们...我仍然在等待是否有解决方法来修复此错误与“可见性：折叠”以上是关于具有折叠行的 HTML 表：如果“可见性：折叠”和“溢出：自动”出现错误的主要内容，如果未能解决你的问题，请参考以下文章