溢出：滚动；在 <td>

Posted 2023-03-05

【中文标题】溢出：滚动；在 <td>

【英文标题】：overflow:scroll; in <td>

【发布时间】：2010-11-15 17:28:04

【问题描述】：

为什么 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，我不明白为什么。

【问题讨论】：

令人惊讶的是，最佳答案（恕我直言）是最后一个。对 TD 元素应用高度，然后将其向左浮动。这允许垂直滚动，而无需像其他答案所建议的那样在代码中添加其他元素。

【参考方案1】：

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

【参考方案2】：

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

【讨论】：

我很惊讶看到这项工作，但它提供了我正在寻找的确切行为。这应该是公认的解决方案。

【参考方案3】：

我得到了一些东西from here！

Andrew Fedoniouk 写道：

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

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

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

规范同意你的尊重 到元素。表格单元格是 应该尊重溢出，虽然 至少，Mozilla 似乎没有这样做 所以。我无法回答你的问题 这个例子，虽然我仍然会 猜猜答案仍然与 旧版渲染。

main thread is here。

【讨论】：

好吧，如果你给它一个固定的布局或者一个宽度并且不换行等等，它可以......但是，将它包装到一个 div 在每个浏览器中都很好，即使在 IE6 中也是如此.

感谢 Kirtan，您的信息很有价值。所以这是一个实现限制，而不是规范问题，我没有误读或误解。但是，很遗憾没有关于该线程的进一步讨论，而且在我看来，这个问题不会很快在任何浏览器上得到解决。此外，我延迟接受这个答案，希望有更多关于这个问题的新鲜信息，因为我知道你 ***er 是溢出专家:)

请务必查看最底部的解决方案（即设置高度并将 td 元素向左浮动）。这对我来说效果很好，无需添加任何额外的 div 元素。

【参考方案4】：

你必须将它包装在一个 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>

【讨论】：

我知道 包装器会起作用，但你不觉得你回答的不是我问的吗？

是的，你是对的......我有点快。但是，这可能对任何正在寻找解决方法的人有用，而不是原因。

该变通方法仅适用于溢出 x。你不能做 div height = 100%....

@Shawn：我不明白，你是什么意思？您想要 td 高度为 100% 的解决方法吗？

是的，所以如果表格说是 500px 高，并且您希望 td 占据尽可能高的高度