溢出：在表格单元格中滚动 - 在 Chrome 中有效，在其他地方无效

Question

我试图让滚动条显示在表格单元格中，其内容可能会比原始表格单元格大小更大，并且我不希望整个表格伸展。

这是 jfiddle 上的示例。正如你所看到的，它在 Google Chrome 中工作，但在 Firefox 和 IE 中不起作用：它们的行为就像根本没有溢出：滚动一样。没有在 Safari 中尝试过，但我怀疑这也行不通。

那么，到底是谁的错，是 Chrome 实施了不应该支持的东西，还是其他所有的人？ 更新：需要明确的是，溢出的不是单元格本身，而是我放入其中的 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，这是无法实现的（使用绝对定位不是一个选项，因为元素是从正常流程中取出的，并且“极端”窗口大小调整将导致元素重叠）。

更新： 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>