溢出留下了很多空白

Question

我遇到了CSS溢出的问题，因为它现在在桌子旁边留下了一大片白色空间。

问题：

所以说窗口是500px高，我将tbody的高度设置为100px，溢出设置为auto。而且tbody中的html是1000px高。

为什么浏览器会滚动到1000px而不是100px（500px）？

请参阅fiddle

这是我的HTML：

<table class="height">
    <tbody class="height">
        <tr>
            <td>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            </td>
        </tr>
    </tbody>
</table>

这是我的CSS：

tbody {
    height: 100px;
    overflow: auto;
}


thead > tr, tbody{
    display:block;}

查看它的简单方法。

我应该只有一个滚动条。不是这个额外的。

Answer 1

你可以将它封装在div容器中，并执行相同类型的溢出吗？除非有特殊需要，否则我不确定是否会将所有这些应用到tbody上。

http://jsfiddle.net/bS4pL/

.fixedHeight {
    height: 300px;
    overflow-y: auto;
}


<div class="fixedHeight">
    <table>
        <tbody class="height">
            <tr>
                <td>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Answer 2

尝试将 display：block 添加到您的表类中。现在，默认情况下为 display：table ，其行为与常规div块不同。

我建议将表格放到div中，而不是放到主体中，以便更好地通过css样式进行控制：）