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

Question

I have this CSS for a table inside a div:

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

But the padding has no effect. When I delete border-collapse: collapse;, it works but adds 30px to the top-border instead of 30px of empty space. When I use margin-top: 30px;, it also works, but adds 30px to the entire div.

Answer 1

Why not add an additional container for your <table> element between the outer container and style it to suit your needs?

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

Hope this helps.