因为我在桌子后面有一个背景图像，所以用白色填充来伪装是行不通的。我选择在每行内容之间放置一个空行：

<tr class="spacer"><td></td></tr>

然后使用css为间隔行提供一定的高度和透明背景。

行间隙的出现可以通过在应该存在下一个间隙的单元格上使用底部边框来实现，即边框底部：纯白色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>

我在与一个类似的问题作斗争时偶然发现了这一点。我发现Varun Natraaj的答案非常有用，但我会使用透明边框。

td { border: 1em solid transparent; }

透明边框仍具有宽度。

在父表中，尝试设置

border-collapse: separate; 
border-spacing: 5em;

再加上一份边境声明，看看这是否达到你想要的效果。不过，请注意，IE不支持“分隔边界”模式。

您可以尝试添加分隔符行：

html格式：

<tr class="separator" />

css:

table tr.separator { height: 10px; }

.table {
 border-collapse: separate; 
 border-spacing: 0 1rem;
}

这很适合我在表格之间提供垂直边距/间距。参考：https://www.w3docs.com/snippets/css/how-to-create-space-between-rows-in-the-table.html