我有一个包含许多行的表。其中一些行是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>

当前回答

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

tr
{
    line-height:30px;
}

其他回答

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

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

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

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

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

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

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

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

https://jsfiddle.net/d0zmsrfs/

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

tr
{
    line-height:30px;
}

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

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

参考。