How do I get padding between table cells, but not around the entire table?

Question

I want to have a table with padding between each of the cells, but not around the outer edge cells, that is, not around the table itself.

Using:

border-collapse : separate;
border-spacing  : 0.5em;

gives me padding everywhere, while using:

border-collapse : collapse;

gives no padding anywhere.

Attempting an alternate approach, I can get padding solely between the cells horizontally using a td + td selector. However I can't use a tr + tr selector because it seems tr ignores margin, padding and border rules.

And, of course, padding on a plain td selector applies to all cells, even the outer-edges of the outer cells.

This only has to work for current-generation browser - no IE 6 or 7 for me thank you very much. And I am not going to loose any sleep over IE 8, though it would be nice if that worked.

Answer 1

This isn't a perfect solution, as it uses padding instead of border spacing. Possibly it will work for your problem though.

HTML:

<table>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
    <tr>
        <td>Data 3</td>
        <td>Data 4</td>
    </tr>
</table>

And the CSS:

table {
    border: 1px red solid;
    border-collapse: separate;
}

td {
    background-color: green;
    border: 1px black solid;
    padding: 10px;
}

td:first-child {
    padding-left: 0px;
}

td:last-child {
    padding-right: 0px;
}

tr:first-child td {
    padding-top: 0px;
}

tr:last-child td {
    padding-bottom: 0px;
}

Produces:

Also on jsFiddle.