Html 溢出：滚动；在 <td>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1211309/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
overflow:scroll; in <td>
提问by an0
Why does the CSS property overflow:scroll;not work in <td>, while overflow:hidden;works well?
为什么 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>
采纳答案by Kirtan
I got something from here!
我从这里得到了一些东西！
Andrew Fedoniouk wrote:
This is actually my question: "One technical reason is that the overflow property does not apply to tables." - why? What is this reason?
I'm no expert, but I believe this is just for backward compatibility with legacy table behavior. You can check the "automatic" table layout algorithm in the spec. I'm pretty sure that this layout algorithm is incompatible with the overflow property (or, more accurately, the layout algorithm will never result in the need for any value of overflow except 'visible').
Yep, this is why I am asking. Seems like there are no formal reasons why or should not be scrollable but seems like UA vendors reached some silent agreement in this area. So is the question.
The spec agrees with you with respect to elements. Table cells are supposed to respect overflow, although Mozilla, at least, appears not to do so. I can't answer your question in this instance, although I would still guess the answer is still tied to legacy rendering.
安德鲁·费多纽克写道：
这实际上是我的问题：“一个技术原因是溢出属性不适用于表。” - 为什么？这是什么原因？
我不是专家，但我相信这只是为了向后兼容旧表行为。您可以在规范中检查“自动”表格布局算法。我很确定这个布局算法与溢出属性不兼容（或者，更准确地说，布局算法永远不会导致需要除“可见”之外的任何溢出值）。
是的，这就是我问的原因。似乎没有正式的理由为什么或不应该滚动，但似乎 UA 供应商在这方面达成了一些无声的协议。问题也是如此。
该规范在元素方面与您一致。表格单元应该尊重溢出，尽管至少 Mozilla 似乎没有这样做。在这种情况下，我无法回答您的问题，尽管我仍然猜测答案仍然与传统渲染有关。
The main thread is here.
在主线程就在这里。
回答by Tim Büthe
You have to wrap it in a div, that will work:
你必须将它包装在一个 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>
回答by user1885649
Firstly provide desired height to td and then Apply "float: left" property to respective "td" you want scrollbar to appear.
首先为 td 提供所需的高度，然后将“float：left”属性应用于您希望滚动条出现的相应“td”。
回答by DrFrank
<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>