Question

我有一张简单的桌子。

<table class='post-layout'>
    <tbody>
        <tr>
            <td class='content'>
            </td>
        </tr>
    </tbody>
</table>

我有简单的CSS，希望td.content可以滚动（表是全屏，固定位置）。

.post-layout
{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;
    height: 100%;
}

.post-layout .content
{
    background-color: white;
    overflow: scroll;
}

我看不出我做错了什么，但是当单元格包含大量内容时，它不会显示滚动条。当我检查表时，它的高度是正确的，但是td的高度比表父高。怎么会这样？

这是一个可以重现问题的sample jsfiddle。

Answer 1

td不支持溢出。

你需要做这样的事情：

... <td><div class="content"> Your content here </div></td> ...

编辑：第二个想法，你为什么要做这一切？

<div class="post-layout"> Your content here </div>

CSS就是你没有.content的东西。

Answer 2

将溢出放在div

上

http://jsfiddle.net/eeSBV/5/

div {
    height: 100px;
    overflow: scroll;
}

Answer 3

为所有div的父元素添加固定尺寸：http://jsfiddle.net/eeSBV/7/

.post-layout tbody, 
.post-layout tr, 
.post-layout td {
    width: 100%;
    height: 100%;
}

Answer 4

好的，因为评论似乎是一个答案，这里有：如果你在一行中有许多tds并希望它们在达到表格高度时滚动，

你需要通过html结构将高度引用从父级传递到最后一个子级：

jsfiddle.net/eeSBV/6。即使这样，如果内联块或浮动元素只需要一个父嵌套子元素，则不需要表。

.post-layout
{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
}
.post-layout tr,
.post-layout tbody,
.post-layout .content
}
    height:100%;
}
.post-layout .content div
{
    overflow:auto;
}

Answer 5

表格显示类型不支持滚动，您可以尝试

.post-layout .content {
background-color: white;
overflow: auto;
display: block;
height: 200px;
}

为什么不溢出滚动我的表格单元格的内容？

5 个答案: