使用 border-collapse 时，顶部填充在 table 上不起作用

Question

我有这个 CSS 用于 div 中的 table:

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

但是填充没有效果。当我删除 border-collapse: collapse; 时，它起作用了，但在顶部边框上增加了 30 像素，而不是空白 space 的 30 像素。当我使用 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

希望这对您有所帮助。

使用 border-collapse 时，顶部填充在 table 上不起作用

Top padding is not working on table when using border-collapse

css

padding

collapse