CODEWITHSUNDEEP
htmlcss
pistacchio
pistacchio

Reputation: 58893

CSS: table border separated horizontally and collapsed vertically

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:

alt text

Upvotes: 11

Views: 15610

Answers (5)

Ben
Ben

Reputation: 1454

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

Upvotes: 4

Ms2ger
Ms2ger

Reputation: 15983

Perhaps

table {
  border-spacing: 1px 0;
}

Upvotes: 26

DisgruntledGoat
DisgruntledGoat

Reputation: 72530

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

Upvotes: 6

ScottS
ScottS

Reputation: 72261

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.

Upvotes: 4

Pat
Pat

Reputation: 25675

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.

Upvotes: 0

Related Questions