不管怎样，我利用了我已经在使用bootstrap(4.3)的优势，因为我需要为我的行添加边距、box-shadow和border-radius，这是我不能用表格做的。

<div id="loop" class="table-responsive px-4">
<section>
    <div id="thead" class="row m-0">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
    </div>
    <div id="tbody" class="row m-0">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
    </div>
</section>
</div>

在css上，我添加了几行来维护引导表的行为

@media (max-width: 800px){
    #loop{
        section{
            min-width: 700px;
        }
    }
}

因为在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和 显示为内联表

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

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

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

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

我放弃了，并插入了一个简单的jQuery代码，如下所示。如果你像我一样有很多tr，这将在每个tr之后添加一个tr。 演示:https://jsfiddle.net/acf9sph6/

<table>
  <tbody>
     <tr class="my-tr">
        <td>one line</td>
     </tr>
     <tr class="my-tr">
        <td>one line</td>
     </tr>
     <tr class="my-tr">
        <td>one line</td>
     </tr>
  </tbody>
</table>
<script>
$(function () {
       $("tr.my-tr").after('<tr class="tr-spacer"/>');
});
</script>
<style>
.tr-spacer
{
    height: 20px;
}
</style>

边界间距属性将适用于这种特殊情况。

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

参考。