如何添加一个页边距表行<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>

当前回答

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

tr
{
    line-height:30px;
}

2014-02-24 21:58:54

其他回答

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

tr
{
    line-height:30px;
}

2014-02-24 21:58:54

我有一个简单的方法:

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

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

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

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

2013-08-22 21:24:02

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

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

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

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

2016-01-08 01:22:01

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

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

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

2013-01-07 15:37:33

添加一个div到单元格，你想添加一些额外的间距:

<tr class="highlight">
 <td><div>Value1</div></td>
 <td><div>Value2</div></td>
</tr>
tr.highlight td div {
margin-top: 10px;
}

2014-10-18 19:58:13

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

推荐文章

最新文章

标签