含折叠行的HTML表格：使用visibility: collapse与overflow:auto时的异常问题

你遇到的核心问题是：当表格设置了display: inline-block和overflow-y: scroll时，visibility: collapse并没有像预期那样完全移除隐藏行的布局空间——浏览器依然会把这些隐藏行的高度算进表格总高度里，从而出现末尾空白和不必要的滚动条。

方案1：用display: none彻底隐藏行（推荐） #

display: none会完全从布局中移除元素，不会让隐藏行占据任何空间，完美解决你的问题。只需要修改CSS中的隐藏类：

tr.hide { display: none; }

这样表格的高度只会由可见行决定，滚动条只会在可见内容超出表格高度时才会出现，不会再出现空白区域。

方案2：保留visibility: collapse并动态计算表格高度 #

如果你需要保留隐藏行的DOM结构（比如要快速切换显示/隐藏状态），可以通过JavaScript动态计算可见行的总高度，然后手动设置表格的高度：

// 计算并设置表格高度为可见行的总高度
function adjustTableHeight() {
  const table = document.querySelector('table');
  let visibleHeight = 0;
  
  // 遍历所有非隐藏行，累加高度
  table.querySelectorAll('tr:not(.hide)').forEach(row => {
    visibleHeight += row.offsetHeight;
  });
  
  // 应用计算后的高度（可根据需要添加边框等额外高度）
  table.style.height = `${visibleHeight}px`;
}

// 页面加载时初始化
adjustTableHeight();
// 当你切换行的显示/隐藏状态时，记得调用这个函数更新高度

小提醒：修复HTML语法错误 #

你的代码里有几处多余的</p>标签（<td>里并没有对应的<p>开头），这会导致HTML结构无效，可能引发潜在的布局问题。修正后的表格行应该是：

<tr><td> Uno </td></tr>
<tr class="hide"><td> Due </td></tr>
<tr><td> Tre </td></tr>
<tr class="hide"><td> Quattro </td></tr>

内容的提问来源于stack exchange，提问作者Thomas