可见性：可滚动容器内的折叠会在Firefox / Edge中产生不需要的滚动条

Question

当thead的可见性设置为在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>

但是那种打败了在overflow: auto上使用table-wrapper的目的......你需要选择你的毒药。或者等到比我聪明的人回答:)。

Answer 2

因为你问我“你怎么会隐藏滚动条” 我们可以通过使用一个小技巧，通过使用（104%）宽度推动将内容保持在屏幕外的表格包装器来做到这一点 足以使ScrollBar超出范围：

 .table-wrapper {
   overflow: auto;
   width : 104%;
   }

示例演示：HERE

注意：如果您的表格大小是动态的而不是静态的，滚动条将显示屏幕宽度是否小于400px，因此您必须通过添加到ur css为手机制作it110%：

@media only screen and (max-width: 400px) { 
  .table-wrapper { width : 110%; }
  }

只有当屏幕小于400px时，才会执行此@media代码

结局示例演示：HERE

其他方式你可以使用Javascript来获得测量精度而无需使用css @media

或者只是在你的css包装器中使用104vw而根本不使用@media代码，但这也带来了价格，因为单位：vw，vh ..etc在一些旧的浏览器中不支持，包括所有手机的opera mini。

---