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?

Alchemize

could you please post in some code that you are already using to achieve what you want? – Streamer

I'm pretty sure that what he wants is not achievable, so providing that code would be tricky. – Unfeigned

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/

Muscovite

Your solution does destroy the table bordering though. Add border: dashed grey 1px; to table in your example to see what i mean. – Alchemize

If you need a border around the table, then put it on the div as I did for demonstration purposes. Add float or display: inline-block for the div to "shrink wrap". – Muscovite

Thanks for the pointers. I think your solution is the most feasible one, even though it's far from being perfect. Using display:inline-block; for shrink-wrapping turns CSS-Block-Elements into inlines, so you need to remedy for that using the "open-end-tag-newline"-technique (eg. "<ol><li>1</li[NEWLINE]><li>.."), enforcing a certain way of writing your html-code, which is never a good thing. On the bright side, you don't need to re-calculate cell extents like in marines' solution, nor do you need to wrap each cell element in additional div-tags as in thirtydot's solution. – Alchemize

Here's a small fork using this technique with maximum-width tables: jsfiddle.net/r9czt9t3/4 – Redroot

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>

Corroboree

Answer 3

Maybe like this: http://jsfiddle.net/H37BG/6/

Dashed border is table border which you can set to none. :)

Davin

Nice nice trick! (though would be the coolest with ie7 working), maybe with css <=ie7 specific code – Spectator

I've added conditional comment for IE7. Check it out now. – Davin

@marine Now it's perfect, but try putting *margin:3px and *width:192px;*height:192px in the css box. It's ie7 & ie6 specific, faster as you don't have to inline it in your html, and won't be treated by other browsers – Spectator

@marines: Your solution - like the one from RoToRa (see below) does destroy the table bordering though. Add some text right after your comments in the HTML portion (before the first div), and increase the border-spacing (along with the necessary follow-up fixes to top/left) in the CSS (e.g. to 20px) to see what i mean. – Alchemize

@marines: Please take a look at this. The table border is red - and it flows into the "Text before table". Using your solution, I would be forced to a) give up control over the 'tables' attributes (I want to retain full control over e.g. border) and use the 'div' attributes as an replacer which in turn also would force me to b) re-calculate the width / height positions of div and table every time I want to change the cellspacing and c) I also lose control over the 'flow layout' mechanisms inherent to tables (e.g. cell extents based on content). – Alchemize

set table border to 0px and there is no overlaying over text – Davin