24

为什么 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，我看不出为什么。

4

4 回答 4

31

你必须将它包装在一个 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>
于 2009-07-31T08:58:23.407 回答
13

首先为 td 提供所需的高度，然后将“float：left”属性应用于您希望滚动条出现的相应“td”。

于 2013-01-08T09:38:32.077 回答
6

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

安德鲁·费多尼乌克写道：

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

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

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

该规范在元素方面与您一致。表格单元应该尊重溢出，尽管 Mozilla 至少似乎没有这样做。在这种情况下，我无法回答您的问题，尽管我仍然猜想答案仍然与旧版渲染有关。

主线在这里。

于 2009-07-31T09:04:22.850 回答
2 

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

于 2020-03-10T16:07:13.570 回答