因为在tr上margin被忽略，我通常使用一个变通方法，通过设置一个透明的border-bottom或border-top，并将background-clip属性设置为padding-box，这样背景颜色就不会在边界下面被绘制。

table {
   border-collapse: collapse; /* [1] */
}

th, td {
  border-bottom: 5px solid transparent; /* [2] */
  background-color: gold; /* [3] */
  background-clip: padding-box; /* [4] */
}

确保单元格共享公共边界，但这是完全可选的。没有它也能解决问题。 5px的值代表你想要达到的边距 设置行/单元格的背景色 确保背景没有画在边框下面

请在这里查看演示:http://codepen.io/meodai/pen/MJMVNR?editors=1100

所有现代浏览器都支持背景剪辑。(和IE9 +)

或者你也可以使用border-spacing。但在边界崩溃即将崩溃的情况下，这是行不通的。

在class="highlighted"之前添加此样式 padding-bottom和 显示为内联表

表行不能有边距值。你能增加填充吗?这是可行的。否则，您可以在class="highlighted"行前后插入<tr class="spacer"></tr>。

首先，不要尝试给<tr>或<td>设置边距，因为这在现代渲染中行不通。

解决方案1

虽然边距无效，但填充有效:

td{
    padding-bottom: 10px;
    padding-top: 10px;
}

警告:这也会使边界远离元素，如果你的边界是可见的，你可能想要使用解决方案2。

解决方案2

为了保持边界接近元素并模拟边缘，在每个reel表的<tr>之间放置另一个<tr>，如下所示:

<tr style="height: 20px;"> <!-- Mimic the margin -->
</tr>

另一种可能是使用伪选择器:after或:before

tr.highlight td:last-child:after
{
  content: "\0a0";
  line-height: 3em;
}

这可能会避免浏览器不理解伪选择器的问题，而且背景颜色也不是问题。

但缺点是，它在最后一个单元格之后添加了一些额外的空白。

这并不完美，但我很高兴地发现你可以分别控制水平和垂直边界间距:

table
{
 border-collapse: separate;
 border-spacing: 0 8px;
}