MrCC MrCC - 1 month ago 6
HTML Question

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?

Answer

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/

Comments