How to get padding between table cells, but not across the table?

Question

I want to have a table with an addition 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 fill everywhere using:

 border-collapse : collapse; 

adds nothing.

Trying an alternative approach, I can only get padding between cells horizontally using the td + td selector. However, I cannot use the tr + tr selector, because it seems that tr ignoring the rules of fields, additions, and borders.

And, of course, the addition to the td simple selector applies to all cells, even to the outer edges of the outer cells.

This should only work for the current generation browser - no IE 6 or 7 for me, thank you very much. And I'm not going to sleep over IE 8, although it would be nice if that worked.

Answer 1

This is not an ideal solution, since it uses indentation instead of line spacing. Perhaps this will work for your problem.

HTML:

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

And 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 in jsFiddle .

Answer 2

Can you play with the markup to add. First to the first cell in the row and the last, and I think that to the first and last rows, and then to the corresponding pad?