如何向表行<tr>添加边距

Question

我有一个包含许多行的表.其中一些行是class="highlight"并且表示需要以不同方式设置样式并突出显示的行.我要做的是在这些行之前和之后添加一些额外的间距,使它们看起来与其他行稍微分开.

我以为我可以完成这件事,margin-top:10px;margin-bottom:10px;但它不起作用.任何人都知道如何完成这项工作,或者是否可以完成？这是HTML,我已经在tbody中设置了第2个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>

Answer 1

表行不能有边距值.你能增加填充吗？那会有用.否则,您可以在行<tr class="spacer"></tr>之前和之后插入class="highlighted".

Answer 2

该border-spacing物业将适用于这种特殊情况.

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

参考.

Answer 3

你<tr>不能自己设计样式,但你可以将<td>s设置为"高亮" <tr>sa样式,就像这样

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

Answer 4

行高可能是可能的解决方案

tr
{
    line-height:30px;
}

Answer 5

我知道这有点老了,但我只是按照同样的方式开始工作.你不能这样做吗？

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

希望这可以帮助.

Answer 6

首先,不要试图为a <tr>或a 设置边距,<td>因为它在现代渲染中不起作用.

• 解决方案1

虽然保证金不起作用,但填充确实有效:

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

警告:这也会将边框推离元素,如果边框可见,则可能需要使用解决方案2.

• 解决方案2

要保持边框靠近元素并模仿边距,请<tr>在每个卷轴表之间放置另一个,<tr>如下所示:

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

Answer 7

这不会是完全完美的,虽然我很高兴地发现,你可以控制的水平和垂直边框间距 分别:

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

Answer 8

因为margin被忽略tr,我通常使用一种解决方法,通过设置透明border-bottom或border-top设置background-clip属性,padding-box以便background-color不在边框下绘制.

table {
   border-collapse: collapse; /* [1] */
}

th, td {
  border-bottom: 5px solid transparent; /* [2] */
  background-color: gold; /* [3] */
  background-clip: padding-box; /* [4] */
}

1. 确保单元格共享一个公共边框,但完全是可选的.解决方案没有它.
2. 该5px值表示您要实现的保证金
3. 设置background-color行/单元格
4. 确保background没有涂在下面border

在这里看一个演示:http://codepen.io/meodai/pen/MJMVNR？editors = 1100

background-clip所有现代浏览器都支持.(和IE9 +)

或者你可以使用border-spacing.但这不适用于border-collapse设置collapse.

Answer 9

您可能会尝试使用 CSS 转换来缩进整个 tr：

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

我认为这是一个有效的解决方案。在我的 OSX 上的 Firefox 16、Chrome 23 和 Safari 6 中似乎运行良好。

Answer 10

模仿行上空白的一种方法是使用伪选择器在上增加一些间距td。

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

这样，标记为Highlight类的所有内容都将上下分开。

https://jsfiddle.net/d0zmsrfs/