CSS: table border separated horizontally and collapsed vertically

Question

is there any way to apply to a table cells' both the separate and the collapsed border properties to have collapsed but separated? Thanks

EDIT: this is the wanted result:

Answer 1

Perhaps

table {
  border-spacing: 1px 0;
}

Answer 2

The closest I can get is:

table {
    border-collapse: separate;
    border-spacing: 4px 0;
}
table td, table th {
    border: 1px solid black;
}

Unfortunately, this will create a double-thick line between the rows. Negative values are not allowed in the border-spacing property, otherwise -1px would probably work.

---

You could make the other lines 2px wide if that is acceptable, then at least you wouldn't have differing border thicknesses:

table {
    border-collapse: separate;
    border-spacing: 4px 0;
}
table td, table th {
    border-width: 1px 2px;
    border-style: solid;
    border-color: black;
}
table tr:first-child th,
table tr:first-child td {
    border-top-width: 2px;
}
table tr:last-child th,
table tr:last-child td {
    border-bottom-width: 2px;
}

Answer 3

This can be achieved without using extra div elements in the th & td cells. This solution works in Chrome, Firefox and IE8+.

CSS

table
{
    border-collapse: separate;
    border-spacing: 10px 0px;
}
td, th
{
    padding: 10px;
    border: 1px solid #000;
    border-top: none;
}
table tr:first-child th
{
    border-top: 1px solid #000;
}

Change table tr:first-child th to table tr:first-child td if the table's first row doesn't contain table header cells (TH).

See my jsfiddle here: Table with column spacing but collapsed row border