CSS: table border separated horizontally and collapsed vertically

is there any way to apply to a table cells' both the s开发者_运维问答eparate and the collapsed border properties to have collapsed but separated? Thanks

EDIT: this is the wanted result:

Perhaps

table {
  border-spacing: 1px 0;
}

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;
}

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

No, the border-collapse does not allow for separate defining of the horizontal and vertical. You can achieve it with extra markup (which, on a table, could end up being a lot of extra markup), so I don't advise it, but I will give the code for it:

Html:

<table>
   <tr>
     <th><div>Header 1</div></th>
     <th><div>Header 2</div></th>
   </tr>
   <tr>
     <td><div>Content 1</div></td>
     <td><div>Content 2</div></td>
   </tr>
   <tr>
     <td><div>Content 3</div></td>
     <td><div>Content 4</div></td>
   </tr>
</table>

And css:

table {border-collapse: collapse;}
th, td { border: 0; padding: 0;}
th div, td div {margin: 5px 0 0; border: 1px solid #ff0000; padding: 5px;}

Of course, you may want to use a class on the div or a child selector, some way of only targeting the div if you might have other div's in the table data. The margin controls your horizontal gap, and of course, your padding or border width can be whatever you want.

Is this what you're looking for?

table {
    border: 1px solid black;
}

table td {
    border: 1px solid red;
    margin: 3px;  
}

It doesn't use the border-collapse property, but it creates an outer table border with each <td> in its own separate border.