tr之间的空间,tr作为连续的块

时间:2011-07-28 08:33:37

标签: css html-table tablerow

我想格式化一个表来显示为行,每行是一个连续的框,并且行之间有空格。例如:

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

我想要的应该是以下内容:

enter image description here

我通过在数据之间添加额外的tr行来实现上述目的:

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

但我想知道我是否可以用CSS实现这种格式化,即不改变我在顶部写的html中的任何内容。

编辑:

Adam Kiss建议使用与背景颜色相同的底边。这适用于我目前的情况,但正如他指出的那样,当背景不仅仅是同色表面时,这将不起作用。

为了完整性:可以在保持间距间隙透明的同时实现上述目标吗?

3 个答案:

答案 0 :(得分:2)

如果你的情况与你的照片所暗示的那样,意味着你有全彩色背景,那么以下应该是绝对足够的:

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

:)

刚刚注意到您的更新:我要么使用一些&lt; span&gt; (或不同的标签)在&lt; td&gt;内或者在&lt; td&gt; s上玩边距,虽然我认为这不会起作用:)

答案 1 :(得分:1)

您可以在border-bottom: 2px solid #aaaaff;添加tr,其中#aaaaff是您身体的背景颜色,2px是行之间的空格。

示例:http://jsfiddle.net/ZHdgz/

答案 2 :(得分:0)

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

试试这个.....它可以工作