CSS: table border separated horizontally and collapsed vertically

Question

Hi,

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

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.

Answer 2

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.

Answer 3

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 4

Perhaps

table {
  border-spacing: 1px 0;
}