溢出：在表格单元格中滚动 - 在Chrome中工作，不会在其他位置工作 [英] Overflow:scroll in a table cell - works in Chrome, doesn't work anywhere else
问题描述
我想要在表格单元格中显示一个滚动条，其内容可能会比原始表格单元格大小更大，并且我不想将整个表格展开。 / p>
以下是jfiddle的示例。正如你所看到的，它可以在谷歌Chrome浏览器，但不工作在Firefox或IE中：它们只是表现为没有溢出：全部滚动。没有在Safari中尝试过，但我怀疑也不会工作。
所以，谁在这里，Chrome的实现的东西，不应该被支持，还是所有其他？ 更新：要清楚，它不是正在溢出的单元格本身，而是我投入的div。代码如下所示：
< table&
< tr>
< td class =header>
< div class =header>标头< / div>
< / td>
< / tr>
< tr>
< td>
< div class =scroll>
...这里有非常大的内容...
< / div>
< / td>
< / tr>
< tr>
< td class =footer>
< div class =footer> Footer< / div>
< / td>
< / tr>
< / table>
您可以看到 over at jfiddle 。
我想要实现的是一个布局，通过该布局，页眉和页脚之间的可用空间将完全填写和空间耗尽然后它获取一个滚动条，而不是整个窗口。我已经来了解，即使通过涉及Stack Overflow，使用CSS单独使用DIV的，这是不可能实现的（使用绝对定位不是一个选项，因为元素是从正常流和一个极端窗口调整大小会导致元素重叠）。
更新： flexbox模型似乎正是这些情况下所需要的。
如果你看一下CSS规范，你会发现将发现使用诸如 position 和 overflow 等表元素上的规则的结果实际上是未定义的。事实上，表具有自己复杂的布局规则，它们与许多CSS规则冲突，并且规范几乎让浏览器可以做他们想要的。
你的问题，这真的没有人的错。没有浏览器是正确的或错误的。
至于如何做，你最好的选择是不使用表，失败尝试在表单元格中嵌入div，
您尝试做的与表格冲突布局算法。默认情况下，默认情况下，哪些表格会调整其单元格大小，以适合行/列的内容。滚动条尽管你试图阻止它做那是在规范中没有定义的东西。浏览器没有'正确'的方式来做你要求的表格单元格。
除了依靠黑客和运气，你唯一真正的解决方案是听着人们说的话，停止尝试使用表来实现这种布局。在你的设计中没有什么是无法实现的3个div和正确的布局类型 - 特别是如果你不关心IE6。这是你应该瞄准的理想解决方案。
I'm trying to get a scrollbar show up in a table cell whose content may grow bigger than the original table cell size, and I don't want the whole table to stretch out.
Here's the example on jfiddle. As you can see, it works in Google Chrome, but doesn't work in Firefox nor in IE: they just behave as if there was no overflow:scroll at all. Haven't tried it in Safari, but I suspect that won't work either.
So, who's at fault here, Chrome for implementing something which isn't supposed to be supported, or all the others? Update: to be clear, it's not the cell itself that is being overflowed, but a div I put into it. The code looks like this:
<table>
<tr>
<td class="header">
<div class="header">Header</div>
</td>
</tr>
<tr>
<td>
<div class="scroll">
... VERY BIG CONTENT HERE ...
</div>
</td>
</tr>
<tr>
<td class="footer">
<div class="footer">Footer</div>
</td>
</tr>
</table>
You can see it all over at jfiddle.
What I'm trying to achieve is a layout by which the available space between the header and the footer is completely filled out and if the space gets exhausted then it gets a scrollbar, not the whole window. I've come to understand, even by wading here on Stack Overflow, that With CSS alone, using just DIV's, this is not achievable (using absolute positioning isn't an option, because the elements are taken out of the normal flow and an "extreme" window resizing will cause elements to overlap).
Update: the flexbox model seems to be exactly what is needed in these cases. However, I suppose we can't rely on it being implemented broadly, still.
If you look in the CSS spec you'll find the result of using rules like position and overflow on table elements are actually undefined. In fact tables have their own complicated layout rules that conflict with many CSS rules and the spec pretty much leaves it up to browsers to do what they want.
So to answer part of your question, it's really nobody's fault. No browser is right or wrong.
As for what to do about it you best option is to not use a table and failing that try embedding a div in the table cell and apply your rules to that.
UPDATED FOR YOUR EDIT
What you are trying to do conflicts with the table layout algorithm. What tables do by default is resize their cells to fit the contents of the row/column. Scrollbar notwithstanding You're trying to stop it doing that which is something not defined in the spec. There is no 'correct' way for browsers to do what you're asking with a table cell.
Your only real solution, other than relying on hacks and luck, is to listen to what people are saying and stop trying to achieve this layout using a table. There is nothing in your design that couldn't be achieved with 3 divs and right type of layout - especially if you don't care about IE6. That is the ideal solution you should be aiming for.
这篇关于溢出：在表格单元格中滚动 - 在Chrome中工作，不会在其他位置工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
