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

css, html

Solution

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.

Problem

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?

Original source

Related problems