HTML / CSS formatting: TRUE spacing between cell <-> cell, not between cell <-> any

Question

I'm looking for hints regarding the spacing between table cells. I'm aware of cellspacing / cellpadding in HTML and their CSS equivalents border-spacing / padding, but they're doing more that what I would expect when going by their names. What I want to achieve is cellspacing as implied by the term: the spacing solely between cells, not between a cell and any element surrounding it.

Here's a picture to show what I mean:

In short, I don't want the spacing as depicted by the red arrows (that is, between cell and table) yet I do desire the spacing between two adjacent cells. Is there any 'easy' way to this, or do I need to go the tedious way of assigning different syles to the 'bordering' cells vs. the 'interior' cells?

Answer 1

A simple solution, that has always worked for me (even in IE) is to give the table a negative margin the same size as the border-spacing.

Quick and dirty sample: http://jsfiddle.net/rBkPQ/

Answer 2

Try this: http://jsfiddle.net/dBSWV/

IE8 doesn't support :last-child, so if you need it to work there, you'll need to use for example tr.last > td > div and add a .last class.

table {
    border: 1px solid red
}
td > div {
    border: 1px solid #000;
    margin: 5px
}
tr:first-child > td > div {
    margin-top: 0
}
tr:last-child > td > div {
    margin-bottom: 0
}
td:first-child > div {
    margin-left: 0
}
td:last-child > div {
    margin-right: 0
}

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td><div>Content 1</div></td>
        <td><div>Content 2</div></td>
        <td><div>Content 3</div></td>
    </tr>
    ..
</table>