html - 可见性 : collapse within a scrollable container produces unwanted scrollbar in Firefox/Edge

Question

当在 Firefox/Edge 中将 thead 的可见性设置为折叠时，包装器的 div 高度似乎计算不正确。 Chrome 中没有滚动条。知道如何修复它吗？

.table-wrapper {
  overflow: auto;
  background-color: green;
  border: 2px solid black;
}

thead {
  visibility: collapse
}

<div class="table-wrapper">
<table>
  <thead>
  <tr>
    <th>Head</th>        
    <th>Head</th>
    <th>Head</th>
  </tr>
  </thead>
  <tbody>    
    <tr><td>Content</td></tr>        
    <tr><td>Content</td></tr>
    <tr><td>Content</td></tr>        
  </tbody>
</table>
</div>

Answer 1

我认为这可能是因为滚动条的存在是在 thead 从这些浏览器中的流中删除之前确定的。当我向下滚动时，表格后面的空间量大约是隐藏的 thead 的空间量。

你能做的最好的事情就是给你的table-wrapper一个比带有标题的表格更大的固定高度(很难提前确定，并且可能需要JavaScript)。

或者，将表格的 max-height 设置为 100%，并将其overflow 设置为 hidden:

.table-wrapper {
  overflow: auto;
  background-color: green;
  border: 2px solid black;
}

table {
  max-height: 100%;
  overflow: hidden;
}

thead {
  visibility: collapse;
}

<div class="table-wrapper">
<table>
  <thead>
  <tr>
    <th>Head</th>        
    <th>Head</th>
    <th>Head</th>
  </tr>
  </thead>
  <tbody>    
    <tr><td>Content</td></tr>        
    <tr><td>Content</td></tr>
    <tr><td>Content</td></tr>        
  </tbody>
</table>
</div>

但这违背了在 table-wrapper 上使用 overflow: auto 的目的……你需要选择你的毒药。或者等到比我聪明的人回答:)。