使用边框折叠时，顶部填充不在桌面上

Question

我有一个div里面的表的CSS：

#orderTabel {
padding-top: 30px;
border-collapse: collapse;
}

但填充没有效果。当我删除border-collapse: collapse;时，它可以正常工作但是向顶部边框添加30px而不是30px的空白空间。 当我使用margin-top: 30px;时，它也可以工作，但是为整个div增加了30px。

Answer 1

为什么不在外部容器之间为<table>元素添加额外的容器并根据您的需要进行样式设置？

<强> HTML

<div class="border">
    <div class="top-margin">
        <table id="orderTabel">
            <tr><th> Head </th><th> Head </th><tr>
            <tr><td> addaa </td><td> addaa </td></tr>
            <tr><td> addaa </td><td> addaa </td></tr>
        </table>
    </div>
</table>

<强> CSS

table, td, th
{
    border: 1px solid black;
}

.border
{
    border: 1px solid black;
}

.top-margin
{
    margin-top: 30px;
}

#orderTabel 
{
    border-collapse: collapse;
}

Fiddle

希望这有帮助。