如何添加一个页边距表行<tr>

我有一个包含许多行的表。其中一些行是class="highlight"，表示需要采用不同样式并突出显示的行。我要做的是在这些行之前和之后添加一些额外的行距，这样它们就看起来与其他行略有分离。

我想我可以用margin-top:10px;margin-bottom:10px;但这并不奏效。有没有人知道怎么做，或者能不能做到?这里是HTML，我已经在tbody中设置了第二个tr来突出显示类。

<table>
<thead>
  <tr>
     <th>Header 1</th>
     <th>Header 2</th>
  </tr>
</thead>
<tbody>
  <tr>
     <td>Value1</td>
     <td>Value2</td>
  </tr>
  <tr class="highlight">
     <td>Value1</td>
     <td>Value2</td>
  </tr>
  <tr>
     <td>Value1</td>
     <td>Value2</td>
  </tr>
  <tr>
     <td>Value1</td>
     <td>Value2</td>
  </tr>
</tbody>
</table>

当前回答

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

tr{ 
    border: 5px solid white;
}

2016-08-23 20:47:32

其他回答

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

2012-05-21 18:10:43

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

tr
{
    line-height:30px;
}

2014-02-24 21:58:54

我放弃了，并插入了一个简单的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>

2016-06-24 19:07:18

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