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

Question

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

考虑以下代码：（请此处查看其实际情况）

<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 表格模型，并创建自己的表格样式显示，包括浮动、设置宽度/高度等。