html - 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.