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

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

Answer 2

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

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

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

2 个答案: