如何添加一个页边距表行<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>本身设置样式，但是你可以给<td>在"highlight" <tr>s里面设置一个样式，就像这样

tr.highlight td {
  padding-top: 10px; 
  padding-bottom:10px
}

2012-05-21 18:14:35

其他回答

表行不能有边距值。你能增加填充吗?这是可行的。否则，您可以在class="highlighted"行前后插入<tr class="spacer"></tr>。

2012-05-21 18:10:43

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

2014-08-19 13:53:04

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

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

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

https://jsfiddle.net/d0zmsrfs/

2017-08-28 15:33:32

你不能给<tr>本身设置样式，但是你可以给<td>在"highlight" <tr>s里面设置一个样式，就像这样

tr.highlight td {
  padding-top: 10px; 
  padding-bottom:10px
}

2012-05-21 18:14:35

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

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

希望这能有所帮助。

2015-07-16 19:23:39

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

推荐文章

最新文章

标签