溢出：在表格单元格中滚动 - 适用于 Chrome，不适用于其他任何地方

Question

我想让一个滚动条显示在一个表单元格的内容可能比原来的表单元格大小大，我不希望整个表伸展。

下面是jfiddle的例子。正如你所看到的，它在Google Chrome中工作，但在Firefox和IE中不起作用:它们只是表现得好像根本没有溢出:滚动。我还没有在Safari中尝试过，但我怀疑这也行不通。

所以，谁在这里的错误，Chrome实现的东西不应该被支持，或所有其他?Update:要清楚，这不是单元格本身正在溢出，而是我放入它的div。代码看起来像这样:

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

你可以在jfiddle上看到这一切。

我想要实现的是一种布局，其中页眉和页脚之间的可用空间完全填满和如果空间耗尽，那么它得到一个滚动条，而不是整个窗口。我已经明白，即使在Stack Overflow上涉水，仅使用CSS，仅使用DIV，这是无法实现的(使用绝对定位不是一种选择，因为元素被从正常流中取出，并且"极端"窗口大小调整将导致元素重叠)。

Update: flexbox模型似乎正是在这些情况下所需要的。然而，我想我们仍然不能指望它被广泛实施。

Answer 1

这就是你想要达到的目标http://www.cssplay.co.uk/layouts/basics2.html吗?

Answer 2

如果你查看CSS规范，你会发现在表元素上使用position和overflow这样的规则的结果实际上是未定义的。事实上，表格有自己复杂的布局规则，这些规则与许多CSS规则相冲突，规范基本上让浏览器做他们想做的。

所以回答你的部分问题，这真的不是任何人的错。浏览器没有对错之分。

至于怎么做，你最好的选择是不使用表和失败，尝试嵌入一个div在表单元格和应用你的规则。

为您的编辑更新

你正在尝试做的事情与表布局算法冲突。默认情况下，表所做的是调整单元格的大小，以适应行/列的内容。尽管你试图阻止它做的东西，这是没有在规范中定义的。没有"正确"的方式为浏览器做你的表格单元格的要求。

你唯一真正的解决方案，除了依靠技巧和运气，就是倾听人们在说什么，不要试图使用表格来实现这种布局。在你的设计中，没有什么是不能通过3个div和正确的布局实现的——特别是如果你不关心IE6。

Answer 3

你能不能把它分成三个独立的表格，中间的表格用div包围起来，这样你就可以对它应用滚动了?

div {
    overflow-y:scroll;
    //set height to however large you would like your scrollable area to be
}
<table>
    <tr>
        <td class="header">
            <div class="header">Header</div>
        </td>
    </tr>
</table
<div>
    <table>
        <tr>
            <td>
                <div class="scroll">
                    ... VERY BIG CONTENT HERE ... 
                </div>
            </td>
        </tr>
    </table>
</div>
<table>
    <tr>
        <td class="footer">
            <div class="footer">Footer</div>
        </td>
    </tr>
</table>