Question

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

它似乎没有按预期工作：

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

$transaction = PayPal::Transaction();
        $transaction->setAmount($amount);
        $transaction->setItemList($itemList);

Answer 1

显示类型有问题。

如果您使用display: block;更改表格，则表示您有身高限制。

此css适用于您的桌子（请注意您没有tbody标签）

table {
    display: block;
} 

table tbody {
    display: table;
}

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

Answer 2

overflow:scroll不适用于以下表格（taken from this great SO answer）：

Andrew Fedoniouk写道：


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


我不是专家，但我相信这只是落后的   与遗留表行为的兼容性。你可以检查一下   规范中的“自动”表格布局算法。我很确定   这种布局算法与溢出属性不兼容（或者，   更准确地说，布局算法永远不会产生需要   除了“可见”之外的任何溢出值。


是的，这就是我要问的原因。似乎没有正式的理由     为什么或不应该是可滚动的，但似乎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>

html table height属性不限制firefox中的高度

2 个答案: