CSS border-spacing for every other row

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

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 2

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/