溢出:滚动; 在<td>

Question

为什么CSS属性overflow:scroll;不起作用<td>,虽然overflow:hidden;效果很好？

<table border="1" style="table-layout:fixed; width:100px">
  <tr>
    <td style="overflow:scroll; width:50px;">10000000000000000000000000000000000</td>
    <td>200</td>
    <td>300</td>
  </tr>
</table>

从CSS规范^1,2,我不明白为什么.

Answer 1

你必须将它包装在一个div中,它将起作用:

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

Answer 2

首先为td提供所需的高度,然后将"float:left"属性应用于要显示滚动条的相应"td".

Answer 3

我从这里得到了一些东西!

Andrew Fedoniouk写道:

这实际上是我的问题:"一个技术原因是溢出属性不适用于表格." - 为什么？这是什么原因？

我不是专家,但我相信这只是为了向后兼容遗留表行为.您可以在规范中查看"自动"表格布局算法.我很确定这种布局算法与溢出属性不兼容(或者更准确地说,布局算法永远不会导致需要除'可见'之外的任何溢出值).

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

该规范在元素方面与您达成一致.表格细胞应该尊重溢出,尽管Mozilla至少似乎没有这样做.在这种情况下我无法回答你的问题,尽管我仍然猜测答案仍然与传统渲染有关.

在主线程就在这里.