CSS: how do I create a gap between rows in a table?
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
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.