我有一个包含许多行的表。其中一些行是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.highlight {
    border-top: 10px solid;
    border-bottom: 10px solid;
    border-color: transparent;
}

希望这能有所帮助。

其他回答

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

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

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

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

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

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

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

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

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

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

tr
{
    line-height:30px;
}

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

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

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

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