CSS: how do I create a gap between rows in a table?

Question

Meaning making the resultant table look less like this:

 [===ROW===] [===ROW===] [===ROW===] [===ROW===] 

... and more like this:

 [===ROW===]  [===ROW===]  [===ROW===]  [===ROW===] 

I tried adding

margin-bottom:1em; 

to both td and tr but got nothing. Any ideas?

Answer 1

All you need:

table {     border-collapse: separate;     border-spacing: 0 1em; } 

That assumes you want a 1em vertical gap, and no horizontal gap. If you're doing this, you should probably also look at controlling your line-height.

Sort of weird that some of the answers people gave involve border-collapse: collapse, whose effect is the exact opposite of what the question asked for.