给表行之间的页边距外观的一个hack是给它们一个与背景相同颜色的边框。这在样式化第三方主题时非常有用，您无法更改html标记。例如:

tr{ 
    border: 5px solid white;
}

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

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

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

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

不管怎样，我利用了我已经在使用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>或<td>设置边距，因为这在现代渲染中行不通。

解决方案1

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

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

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

解决方案2

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

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

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

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

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

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

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

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

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

添加一个div到单元格，你想添加一些额外的间距:

<tr class="highlight">
 <td><div>Value1</div></td>
 <td><div>Value2</div></td>
</tr>
tr.highlight td div {
margin-top: 10px;
}