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

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 东西。