具有折叠行的 HTML 表：如果“可见性：折叠”和“溢出：自动”出现错误答案

【问题标题】：HTML Table with collapsed rows: bug if "visibility: collapse" and "overflow:auto"具有折叠行的 HTML 表：如果“可见性：折叠”和“溢出：自动”出现错误
【发布时间】：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 中看到了这一点。

关于如何使这些行真正不可见有什么想法吗？

【问题讨论】：

标签： html css html-table scroll visibility

【解决方案1】：

如果您希望这些行不可见，请使用

tr.hide { display: none;}

如果您希望这些行可见，只需使用

tr.hide { display: table-row;}

【讨论】：

这行得通，它是最明显的解决方案……但“visibility:collapse”的特点是它“计算”了隐藏行的空间，并相应地格式化了表格。这意味着如果隐藏行更宽，则使用“display:none”，当我让它们可见时，表格会改变大小。猜猜我可以修复列的大小并调整隐藏的行以使其适合它们...我仍然在等待是否有解决方法来修复此错误与“可见性：折叠”