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

其他回答

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

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;
}

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

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

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

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

首先,不要尝试给<tr>或<td>设置边距,因为这在现代渲染中行不通。

解决方案1

虽然边距无效,但填充有效:

td{
    padding-bottom: 10px;
    padding-top: 10px;
}

警告:这也会使边界远离元素,如果你的边界是可见的,你可能想要使用解决方案2。

解决方案2

为了保持边界接近元素并模拟边缘,在每个reel表的<tr>之间放置另一个<tr>,如下所示:

<tr style="height: 20px;"> <!-- Mimic the margin -->
</tr>

我有一个简单的方法:

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

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

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

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