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

当前回答

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

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

参考。

其他回答

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

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

希望这能有所帮助。

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

tr
{
    line-height:30px;
}

我有一个简单的方法:

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

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

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

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

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

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

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