CODEWITHSUNDEEP
csspadding
Bouss
Bouss

Reputation: 205

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

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.

Upvotes: 1

Views: 1023

Answers (1)

Master Yoda
Master Yoda

Reputation: 4412

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.

Upvotes: 2

Related Questions