htmlcsspaddingcellspacingcellpadding

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


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?


Solution

  • 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/