Space between tr's, with tr's as contiguous blocks

I want to format a table to show as rows, with each row being a contiguous box, and with space between the rows. Example:

<table>
<tr><td>John</td><td>Doe</td><td>24</td></tr>
<tr><td>Jack</td><td>Foo</td><td>34</td></tr>
<tr><td>Jim</td><td>Beam</td><td>102</td></tr>
</table>

What I want should look something like the following:

I have achieved the above by making additional tr-rows between the data:

<style>
body { background-color: #aaaaff; } 
table { border-collapse: collapse; }
.space_tr { height: 1px; }
.info_tr { background-color: grey; }
.info_tr td { padding: 5 20 5 20px; }
</style>
<table&开发者_如何学Pythongt;
<tr class='info_tr'><td>John</td><td>Doe</td><td>24</td></tr>
<tr class='space_tr'><td colspan='3'></td></tr>
<tr class='info_tr'><td>Jack</td><td>Foo</td><td>34</td></tr>
<tr class='space_tr'><td colspan='3'></td></tr>
<tr class='info_tr'><td>Jim</td><td>Beam</td><td>216</td></tr>
</table>

But I want to know if I can achieve this formatting with just CSS, i.e. without changing anything in the html that I wrote in the top.

EDIT:

Adam Kiss suggested using a bottom-border with same color as the background. This works in my current case, but as he points out, this will not work when having background which is not just a same-color surface.

For completeness: Can the above be achieved while maintaining transparency of the spacing gaps?

if your situation is as your picture suggests, meaning you have full color background, following should be absolutely sufficient:

td { padding: 5px 20px; background: #666; border-bottom: 3px solid #backgroundColor; }

:)

Just noticed your update: I would either use some <span> (or different tag) inside <td> or play with margins on <td>s, although I don't think that that would work :)

You could add a border-bottom: 2px solid #aaaaff; to your trs, where #aaaaff is your body's background-color and 2px is the space between the rows.

Example: http://jsfiddle.net/ZHdgz/

    <style>
    table { border-collapse: collapse; border:solid 10px #aaaaff; background-color:#aaaaff;}
    .space_tr { height: 1px; }
    .info_tr { background-color: grey; }
    .info_tr td { padding: 5 20 5 20px; }
    </style>
    <table>
    <tr class='info_tr'><td>John</td><td>Doe</td><td>24</td></tr>
    <tr class='space_tr'><td colspan='3'></td></tr>
    <tr class='info_tr'><td>Jack</td><td>Foo</td><td>34</td></tr>
    <tr class='space_tr'><td colspan='3'></td></tr>
    <tr class='info_tr'><td>Jim</td><td>Beam</td><td>216</td></tr>
    </table>

try this..... it can b work