不管怎样，我利用了我已经在使用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>在"highlight" <tr>s里面设置一个样式，就像这样

tr.highlight td {
  padding-top: 10px; 
  padding-bottom:10px
}

我有一个简单的方法:

table tr {
    border-bottom: 4px solid;
}

这将在每行之间增加4px的垂直间距。如果你不想在最后一个子结点上得到这个边界

table tr:last-child {
    border-bottom: 0;
}

提醒一下，CSS3伪选择器只能在ie8及以下版本的selectivizr中工作。

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

tr{ 
    border: 5px solid white;
}

线高可以是可能的解决方案

tr
{
    line-height:30px;
}

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

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

参考。