css - tr 之间的空间，以 tr 为连续 block

Question

我想格式化表格以显示为行，每一行都是一个连续的框，行与行之间有空格。示例:

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

我想要的应该如下所示:

我通过在数据之间添加额外的 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 建议使用与背景颜色相同的底部边框。这在我目前的情况下有效，但正如他指出的那样，当背景不仅仅是相同颜色的表面时，这将不起作用。

为了完整性:能否在保持间距透明度的同时实现上述目标？

Answer 1

如果你的情况如你的图片所示，意味着你有全彩色背景，以下应该是绝对足够的:

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

:)

刚刚注意到您的更新:我会在 中使用一些 (或不同的标签)或在 上使用边距，尽管我认为这行不通:)