How do you specify table padding in CSS? ( table, not cell padding )

Question

I have a table with a colored background and I need to specify the padding between the table and it's content, I.E. cells.
The table tag doesn't seem to accept a padding value.
Firebug shows the table and tbody's layout with padding 0 but doesn't accept any value entered for them, so I guess they just don't have the padding property.
But the thing is I want the same separation between cells than the top cells with the table top and the bottom cells with the table's bottom.
Again, what I want is not cell-padding.

EDIT: Thanks, what I really needed, I realize now, was border-spacing, or its html equivalent, cellspacing.
But for some reason, they don't do anything in the site I'm working on.
Both work great on a separate HTML, but in the site they don't.
I thought it could be some style overwriting the property, but cellspacing and an inline border-spacing shouldn't get overwritten, right?
(I use firefox )

EDIT 2: No, TD padding is NOT what I need. With TD padding, top and bottom paddings of adjacent cells sum up, so there's double the space (pad actually) between two cells than between the top cell and the table top border. I want to have exactly the same distance between them.

Answer 1

The easiest/best supported method is to use <table cellspacing="10">

The css way: border-spacing (not supported by IE I don't think)

    <!-- works in firefox, opera, safari, chrome -->
    <style type="text/css">
    
    table.foobar {
    	border: solid black 1px;
    	border-spacing: 10px;
    }
    table.foobar td {
    	border: solid black 1px;
    }
    
    
    </style>
    
    <table class="foobar" cellpadding="0" cellspacing="0">
    <tr><td>foo</td><td>bar</td></tr>
    </table>

Edit: if you just want to pad the cell content, and not space them you can simply use

<table cellpadding="10">

OR

td {
    padding: 10px;
}

Answer 2

You could set a margin for the table. Alternatively, wrap the table in a div and use the div's padding.

Answer 3

Here's the thing you should understand about tables... They're not a tree of nested independent elements. They're a single compound element. While the individual TDs behave more or less like CSS block elements, the intermediate stuff (anything between the TABLE and TD, including TRs and TBODYs) is indivisible and doesn't fall into either inline nor block. No random HTML elements are allowed in that other-dimensional space, and the size of such other-dimensional space isn't configurable at all through CSS. Only the HTML cellspacing property can even get at it, and that property has no analog in CSS.

So, to solve your problem, I'd suggest either a DIV wrapper as another poster suggests, or if you absolutely must keep it contained in the table, you have this ugly junk:

<style>
    .padded tr.first td { padding-top:10px; }
    .padded tr.last td { padding-bottom:10px; }
    .padded td.first { padding-left:10px; }
    .padded td.last { padding-right:10px; }
</style>

<table class='padded'>
    <tr class='first'>
        <td class='first'>a</td><td>b</td><td class='last'>c</td>
    </tr>
    <tr>
        <td class='first'>d</td><td>e</td><td class='last'>f</td>
    </tr>
    <tr class='last'>
        <td class='first'>g</td><td>h</td><td class='last'>i</td>
    </tr>
</table>

Answer 4

You can't... Maybe if you posted a picture of the desired effect there's another way to achieve it.

For example, you can wrap the entire table in a DIV and set the padding to the div.

Answer 5

Funny, I was doing precisely this yesterday. You just need this in your css file

.ablock table td {
     padding:5px;
}

then wrap the table in a suitable div

<div class="ablock ">
<table>
  <tr>
    <td>

Answer 6

With css, a table can have padding independently of its cells.

The padding property is not inherited by its children.

So, defining:

table {
    padding: 5px;
}

Should work. You could also specifically tell the browser how to pad (or in this case, not pad) your cells.

td {
    padding: 0px;
}

EDIT: Not supported by IE8. Sorry.

Answer 7

There is another trick :

/* Padding on the sides of the table */
table th:first-child, .list td:first-child { padding-left: 28px; }
table th:last-child, .list td:last-child { padding-right: 28px; }

(Just saw it at my current job)

Answer 8

You can try the border-spacing property. That should do what you want. But you may want to see this answer.

Answer 9

CSS doesn't really allow you to do this on a table level. Generally, I specify cellspacing="3" when I want to achieve this effect. Obviously not a css solution, so take it for what it's worth.

Answer 10

table {
    border: 1px solid transparent;
}

Answer 11

table {
    background: #fff;
    box-shadow: 0 0 0 10px #fff;
    margin: 10px;
    width: calc(100% - 20px); 
}