0

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

<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-rows 来实现上述目标：

<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 建议使用与背景颜色相同的底部边框。这适用于我目前的情况，但正如他指出的那样，当背景不仅仅是同色表面时，这将不起作用。

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

4

3 回答 3

2

如果您的情况如您的图片所示，这意味着您有全彩色背景，则以下内容绝对足够：

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

:)

刚刚注意到你的更新：我要么在 <td> 内使用一些 <span> （或不同的标签），要么在 <td>s 上使用边距，尽管我认为这不会起作用 :)

于 2011-07-28T08:37:33.923 回答
1

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

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

于 2011-07-28T08:37:56.467 回答
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>

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

于 2011-07-28T09:32:57.577 回答