CSS border-spacing for every other row - html

Question

I am targeting Chrome and other CSS3 compliant browsers and would like to have border separation for every other row.
The CSS I currently have working for every row looks like this-
table{
border-collapse:separate;
border-spacing: 0px 3px;
}
td{
border: 1px solid black;
padding: 5px;
}
What I would like to achieve is this:
CSS
table{
border-collapse:separate;
}
table tr:nth-of-type(odd){
border-spacing: 0px 3px;
}
td{
border: 1px solid black;
padding: 5px;
}
HTML
<table>
<tr>
<td>a-one</td><td>a-two</td><td>a-three</td>
</tr>
<tr>
<td>a-four</td><td>a-five</td><td>a-six</td>
</tr>
<tr>
<td>b-one</td><td>b-two</td><td>b-three</td>
</tr>
<tr>
<td>b-four</td><td>b-five</td><td>b-six</td>
</tr>
<tr>
<td>c-one</td><td>c-two</td><td>c-three</td>
</tr>
<tr>
<td>c-four</td><td>c-five</td><td>c-six</td>
</tr>
</table>
The data is in two row sets and needs to be connected, whereas different sets need to be separated. I would like to keep it in table form to take advantage of the browsers auto-column widths. It seems like border-spacing can only be achieved on the table level. I am already using borders for styling so transparent borders is not a viable option.
Any chance for me- or I am I stuck?
JS-fiddle here identical to above here: http://jsfiddle.net/sSba4/

Answer 1

I'd argue that if the data needs to be visually chunked in separate containers, perhaps the most semantic solution would involve using multiple tables.
However, if you want to keep everything in a single table for whatever reason, then you would need to introduce non-semantic markup to create those visual separations, as border-spacing is a property of the table, not of the row or cell.
<table>
<tr><th></th></tr>
<tr>
<td>Apples</td>
<td>$3.50</td>
</tr>
<tr>
<td>Oranges</td>
<td>$2.46</td>
</tr>
<tr><th></th></tr>
<tr>
<td>Pears</td>
<td>$2.10</td>
</tr>
<tr>
<td>Apples</td>
<td>$3.50</td>
<tr><th></th></tr>
<tr>
<td>Oranges</td>
<td>$2.46</td>
<tr>
<td>Pears</td>
<td>$2.10</td>
</tr>
</table>
CSS
table {
border-collapse:collapse;
}
table tr td {
border: solid #ccc 1px;
padding: 5px 7px;
}
table tr th {
border: none;
padding-top: 5px;
}
See it in action here http://jsfiddle.net/wYCNg/

Answer 2

How about adding an additional row with transparent borders?
html:
<table>
<tr><td>a-one</td><td>a-two</td><td>a-three</td></tr>
<tr><td>a-four</td><td>a-five</td><td>a-six</td></tr>
<tr class="break"><td colspan="3"></td></tr>
<tr><td>b-one</td><td>b-two</td><td>b-three</td></tr>
<tr><td>b-four</td><td>b-five</td><td>b-six</td></tr>
<tr class="break"><td colspan="3"></td></tr>
<tr><td>c-one</td><td>c-two</td><td>c-three</td></tr>
<tr><td>c-four</td><td>c-five</td><td>c-six</td></tr>
</table>
css:
table{
border-collapse:collapse;
}
td{
border: 1px solid black;
padding: 5px;
}
tr.break, tr.break td{
border:none;
height:5px;
padding:0;
}

Answer 3

I've just been considering the same matter. If you put div element inside td, you can use plenty of box-model properties, eg. margin. If you additionally hide td borders you can use margin to set space between cells, rows, cols.
#tab {
border-collapse:collapse;
}
#tab td{
padding:0px;
}
#tab td>div {
width:50px;
height:50px;
background-color:#97FFF8;
margin:1px;
}
#tab td:nth-child(1)>div {
margin-right:10px;
}
#tab tr:nth-child(1) div {
margin-bottom:10px;
}
<table id="tab">
<tbody>
<tr>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
<tr>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
<tr>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
</tbody>
</table>