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

你不能给<tr>本身设置样式，但是你可以给<td>在"highlight" <tr>s里面设置一个样式，就像这样

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

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

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

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

我有一个简单的方法:

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

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

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

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

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

tr
{
    line-height:30px;
}

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

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

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

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

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

参考。

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

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

希望这能有所帮助。

另一种可能是使用伪选择器: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>

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

tr{ 
    border: 5px solid white;
}

因为在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。但在边界崩溃即将崩溃的情况下，这是行不通的。

模拟行边距的一种方法是使用伪选择器在td上添加一些间距。

.highlight td::before, .highlight td::after
{
  content:"";
  height:10px;
  display:block;
}

这样，用高亮类标记的任何内容都将从上到下分开。

https://jsfiddle.net/d0zmsrfs/

首先，不要尝试给<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规则锁定。

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

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

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

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