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

我得到了一些from here！

Andrew Fedoniouk写道：


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


我不是专家，但我相信这是   只是为了向后兼容   遗留表行为。你可以检查一下   “自动”表格布局   规范中的算法。我很漂亮   确定这个布局算法是   与溢出不兼容   财产（或更确切地说，财产）   布局算法永远不会导致   需要任何溢出值   除了'可见'）。

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


该规范尊重你   元素。表格细胞是   虽然应该尊重溢出   至少Mozilla似乎没有做到   所以。我无法回答你的问题   这个例子，虽然我还会   猜猜答案仍然存在   传统渲染。

main thread is here。

Answer 4

<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>

溢出：滚动;在

4 个答案: