html - visibility : collapse within a scrollable container produces unwanted scrollbar in Firefox/Edge

Question

当广告的可见性在 Firefox/Edge 中设置为折叠时，包装器的 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 的目的……你需要选择你的毒药。或者等到比我聪明的人回答:)。