html - 如何制作 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 放入其中并将其设置为滚动!。