html表格高度属性不限制Firefox中的高度答案

【问题标题】：html table height attribute does not limit height in firefoxhtml表格高度属性不限制Firefox中的高度
【发布时间】：2017-06-07 04:18:26
【问题描述】：

如何以滚动不可见元素的方式限制表格的高度。

它似乎没有按预期工作：

http://www.w3schools.com/code/tryit.asp?filename=FBZUOCG0C4C8

table.ex1 {
    table-layout: auto;
    height: 20px;
    overflow-y: scroll;
}

table.ex2 {
    table-layout: fixed;
    height: 20px;
      overflow-y: scroll;

}

【问题讨论】：

为什么不使用包装元素呢？
我更喜欢纯 CSS 解决方案
最大高度在这里不起作用吗？
您是否尝试在其他浏览器中使用它？
没有最大高度工作，没有其他浏览器工作

标签： html css

【解决方案1】：

这是显示类型的问题。

如果你用display: block;换桌，你有身高限制。

这个 css 可以在你的桌子上工作（注意你没有 tbody 标签）

table {
    display: block;
} 

table tbody {
    display: table;
}

编辑：这是一个肮脏的黑客，使用更好的 div 包装器并在该元素上设置溢出属性

【讨论】：

【解决方案2】：

overflow:scroll 不适用于以下 (taken from this great SO answer) 的表：

Andrew Fedoniouk 写道：

这实际上是我的问题：“一个技术原因是溢出属性不适用于表。” - 为什么？这是什么原因？

我不是专家，但我相信这只是为了落后与旧表行为的兼容性。你可以检查规范中的“自动”表格布局算法。我很确定此布局算法与溢出属性不兼容（或者，更准确地说，布局算法永远不会导致需要除 'visible' 外的任何溢出值）。

是的，这就是我问的原因。好像没有正式的理由为什么或不应该是可滚动的，但似乎 UA 供应商达到了一些在这方面的默契。问题也是如此。

规范同意在元素方面和你在一起。表格单元格应该尊重溢出，尽管至少 Mozilla 似乎没有这样做。我不能在这种情况下回答你的问题，虽然我还是会猜答案仍然与旧版渲染有关。

Original question here

Main thread here

因此，考虑到这一点，如果您仍希望生成滚动行为，最常见的替代方法之一是将内容包装在 div 上的 td 内：

<table border="1" style="table-layout:fixed; width:500px">
  <tr>
    <td style="width:100px; height:20px;">
      <div style="overflow: scroll; width:100%; height:100%;">10000000000000000000000000000000000 another</div>
    </td>
    <td>200</td>
    <td>300</td>
  </tr>
</table>

【讨论】：