如何制作 CSS 定义的表格单元格滚动？

Question

我希望能够设置表格的高度，如果单元格比表格大，则强制单元格单独滚动。

考虑以下代码：（查看它的实际操作here）

<div style="display: table; position: absolute;
    width: 25%; height: 80%; min-height: 80%; max-height: 80%;
    left: 0%; top: 10%; right: 75%; bottom: 10%; border: solid 1px black;">
    <div style="display: table-row;">
        <div style="display: table-cell; border: solid 1px blue;">
            {Some dynamic text content}<br/>
            This cell should shrink to fit its contents.
        </div>
    </div>
    <div style="display: table-row;">
        <div style="display: table-cell; border: solid 1px red;
            overflow: scroll;">
            This should only take up the remainder of the table's vertical space.
            This should only take up the remainder of the table's vertical space.
            This should only take up the remainder of the table's vertical space.
            This should only take up the remainder of the table's vertical space.
            This should only take up the remainder of the table's vertical space.
            This should only take up the remainder of the table's vertical space.
            This should only take up the remainder of the table's vertical space.
            This should only take up the remainder of the table's vertical space.
        </div>
    </div>
</div>

如果您打开此代码（在 IE8 中，在我的例子中），您会注意到第二个单元格在浏览器最大化时很好地适合表格。理论上，当您缩小浏览器（也强制表格缩小）时，当表格变得太小而无法容纳所有内容时，垂直滚动条应该出现在第二个单元格内。但实际上，表格只是垂直增长，超出了 CSS height 属性设置的范围。

希望我已经充分解释了这种情况......

有人知道我怎样才能让它工作吗？

Answer 1

一个很老的问题；但当我搜索相同的主题时，在 Google 中仍然排名第二。

我找到的简单解决方案是将“需要滚动div”的内容包装到另一个div中。 不知道为什么；但带有“display:table-cell”的元素不会滚动。 但是它们里面的元素可以。所以在里面放一个 div 并将其设置为滚动！

Answer 2

要获得这种行为，您可能必须避免使用 CSS 表格模型，并创建自己的带有浮动、设置宽度/高度等的表格样式显示。