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>
<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?

回答1:

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 :)

回答2:

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/

回答3:

    <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

来源：https://stackoverflow.com/questions/6856114/space-between-trs-with-trs-as-contiguous-blocks

标签

css

html-table

tablerow