适用于2015年的大多数最新浏览器。简单的解决方案。它不适用于透明，但与Thoronwen的答案不同，我无法获得任何大小的透明渲染。

    tr {
      border-bottom:5em solid white;
    }

为表提供间距的正确方法是使用cellpadding和cellspacing，例如。

<table cellpadding="4">

行间隙的出现可以通过在应该存在下一个间隙的单元格上使用底部边框来实现，即边框底部：纯白色5px；

下面是创建屏幕截图的代码：

<style>
table.class1 {
    text-align:center;
    border-spacing:0 0px;
    font-family:Calibri, sans-serif;
}

table.class1 tr:first-child {
    background-color:#F8F8F8; /* header row color */
}

table.class1 tr > td {
    /* firefox has a problem rounding the bottom corners if the entire row is colored */
    /* hence the color is applied to each cell */
    background-color:#BDE5F8;
}

table.class1 th {
    border:solid #A6A6A6 1px;
    border-bottom-width:0px; /* otherwise borders are doubled-up */
    border-right-width:0px;
    padding:5px;
}

table.class1 th:first-child {
    border-radius: 5px 0 0 0;
}

table.class1 th.last {
    border-right-width:1px;
    border-radius: 0 5px 0 0;
}

/* round the bottom corners */
table.class1 tr:last-child > td:first-child {
    border-radius: 0 0 0 5px;
}

table.class1 tr:last-child > td:last-child {
    border-radius: 0 0 5px 0;
}

 /* put a line at the start of each new group */
td.newgroup {
    border-top:solid #AAA 1px;
}

/* this has to match the parent element background-color */
/* increase or decrease the amount of space by changing 5px */
td.endgroup {
    border-bottom:solid white 5px;
}

</style>

<table class="class1">
<tr><th>Group</th><th>Item</th><th class="last">Row</th></tr>
<tr><td class="newgroup endgroup">G-1</td><td class="newgroup endgroup">a1</td><td class="newgroup endgroup">1</td></tr>
<tr><td class="newgroup">G-2</td><td class="newgroup">b1</td><td class="newgroup">2</td></tr>
<tr><td>G-2</td><td>b2</td><td>3</td></tr>
<tr><td class="endgroup">G-2</td><td class="endgroup">b3</td><td class="endgroup">4</td></tr>
<tr><td class="newgroup">G-3</td><td class="newgroup">c1</td><td class="newgroup">5</td></tr>
<tr><td>G-3</td><td>c2</td><td>6</td></tr>
</table>

tr { 
    display: block;
    margin-bottom: 5px;
}

您可以用＜div/＞元素填充＜td/＞元素，并对您喜欢的div应用任何边距。对于行之间的可视空间，可以在＜tr/＞元素上使用重复的背景图像。（这是我今天刚刚使用的解决方案，它似乎在IE6和FireFox 3中都有效，尽管我没有进一步测试它。）

此外，如果您不愿意修改服务器代码以将＜div/＞s放在＜td/＞s中，那么可以使用jQuery（或类似的东西）将＜td/〕内容动态地包装在＜div/〕中，使您能够根据需要应用CSS。

您需要在td元素上使用填充。像这样的东西应该会奏效。当然，您可以使用顶部填充而不是底部填充获得相同的结果。

在下面的CSS代码中，大于号表示填充仅应用于td元素，这些元素是带有spaceUnder类的tr元素的直接子元素。这将使使用嵌套表成为可能。（示例代码中的单元格C和D）我不太确定浏览器是否支持直接子选择器（想想IE 6），但它不应该破坏任何现代浏览器中的代码。

/*对类spaceUnder的tr元素的直接子级td元素应用填充*/tr.spaceUnder>td{衬垫底部：1毫米；}<表><tbody><tr><td>一个</td><td>B级</td></tr><tr class=“spaceUnder”><td>C类</td><td>D）</td></tr><tr><td>电子</td><td>F级</td></tr></tbody></table>

这应该有点像这样：

+---+---+
| A | B |
+---+---+
| C | D |
|   |   |
+---+---+
| E | F |
+---+---+