3

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

考虑以下代码：（在此处查看实际操作）

<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 中，在我的例子中），您会注意到第二个单元格在浏览器最大化时非常适合表格。理论上，当您缩小浏览器（也强制表格缩小）时，当表格变得太小而无法容纳所有内容时，垂直滚动条应该出现在第二个单元格内。但实际上，表格只是垂直增长，超出了 CSSheight属性设置的范围。

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

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

4

2 回答 2

1

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

于 2010-04-29T22:37:20.903 回答
1

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

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

于 2015-05-08T07:32:41.477 回答