CSS - tr之间的空格，tr是连续的块 [英] CSS - 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:

>

我通过在数据之间增加tr行来实现上述目的：

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>

但我想知道如果我可以实现这种格式化与CSS，即没有改变任何东西我在顶部写的html。

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.

编辑：

Adam Kiss建议使用与背景颜色相同的底边框。这在我目前的情况下工作，但正如他指出，当背景不仅仅是相同颜色的表面时，这将不工作。

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

：）

更新：我会在< td>里面使用一些< span>（或不同的标签），或在< td>上使用边缘，虽然我不认为这将工作）。

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

这篇关于CSS - tr之间的空格，tr是连续的块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！