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

【问题标题】：Overflow:scroll in a table cell - works in Chrome, doesn't work anywhere else溢出：在表格单元格中滚动 - 在 Chrome 中有效，在其他任何地方都无效
【发布时间】：2011-08-01 22:06:12
【问题描述】：

我正在尝试在表格单元格中显示滚动条，该表格单元格的内容可能会比原始表格单元格的大小更大，并且我不希望整个表格伸展开来。

Here's the example on 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>

over at jfiddle你可以看到这一切。

我想要实现的是一个布局，通过该布局，页眉和页脚之间的可用空间被完全填满并且如果空间用完然后它得到一个滚动条，而不是整个窗口。我已经明白，即使在 Stack Overflow 上涉水，仅使用 CSS，仅使用 DIV，这是无法实现的（使用绝对定位不是一种选择，因为元素已脱离正常流程和“极端”窗口大小调整将导致元素重叠）。

更新：flexbox model 似乎正是这些情况下所需要的。但是，我想我们仍然不能指望它被广泛实施。

【问题讨论】：

您想要的布局是否需要表格？如果没有，你最好使用 div 来布局你的页面。
嘿威廉。我可能不够清楚，但表格布局最接近我的需要。在这种情况下，使用 DIVS 似乎是不可能的。 StackOverflow 上有很多类似的请求，答案总是一样的。最接近 DIV 的是使用绝对定位，但是当窗口太小时，元素重叠，这是我不想要的。

标签： css scroll html-table space

【解决方案1】：

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

【讨论】：

好的，谢谢！但是，页脚和页眉会重叠，这样，滚动条看起来会附加到外部容器，而不仅仅是需要滚动的部分。从美学上讲，这不是我想要实现的。 :(
那我猜是这样的http://www.cssplay.co.uk/layouts/bodyfix.html。我不明白你为什么这么担心页脚/页眉重叠，因为窗口这么小也不是很有用。
您的示例不起作用，因为没有为 td 定义高度，这导致 div 的高度不起作用。

【解决方案2】：

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

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

至于如何处理，您最好的选择是不使用表格，如果失败，请尝试在表格单元格中嵌入 div 并将您的规则应用于该表格。

为您的编辑更新

您尝试执行的操作与表格布局算法冲突。默认情况下，表格所做的是调整其单元格的大小以适应行/列的内容。尽管有滚动条您试图阻止它执行规范中未定义的操作。浏览器没有“正确”的方式来执行您对表格单元格的要求。

除了依靠技巧和运气之外，您唯一真正的解决方案是倾听人们在说什么，并停止尝试使用表格来实现这种布局。您的设计中没有什么是 3 个 div 和正确的布局类型无法实现的——尤其是如果您不关心 IE6。这是您应该追求的理想解决方案。

【讨论】：

可能我不够清楚，我已经更新了帖子以更好地解释它：我已经在 td 元素中使用了一个 div，这很奇怪。 :-/

【解决方案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>

【讨论】：