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

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

参考。

我知道这有点老了，但我也有类似的工作要做。你不能这样做吗?

tr.highlight {
    border-top: 10px solid;
    border-bottom: 10px solid;
    border-color: transparent;
}

希望这能有所帮助。

您可以通过添加一个空行的单元格来创建表行之间的空间，就像这样…

<tr><td></td><td></td></tr>

CSS可以用来定位空的单元格，就像这样…

table :empty{border:none; height:10px;}

注意:只有当你的正常细胞都没有空的时候，这个方法才有用。

即使是一个不间断的空格也可以避免单元格被上面的CSS规则锁定。

不用说，你可以调整空间的高度，以任何你喜欢的高度属性包括。

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

你可以尝试使用CSS转换来缩进整个tr:

tr.indent {
   -webkit-transform: translate(20px,0);
   -moz-transform: translate(20px,0);
}

我认为这是一个有效的解决方案。在我的OSX上，火狐16、Chrome 23和Safari 6似乎都能正常运行。

不管怎样，我利用了我已经在使用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;
        }
    }
}