CSS 如何为表格行添加边距 <tr>

How to add a margin to a table row <tr>

提问by sameold

I have a table containing many rows. Some of these rows are class="highlight"and signify a row that needs to be styled differently and highlighted. What I'm trying to do is add some extra spacing before and after these rows so they appear slightly separated from the other rows.

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

I thought I could get this done with margin-top:10px;margin-bottom:10px;but it's not working. Anyone knows how to get this done, or if it could be done? Here's the HTML and I've set the 2nd tr in the tbody to 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>

采纳答案by Steve Binder

Table rows cannot have margin values. Can you increase the padding? That would work. Otherwise you could insert a <tr class="spacer"></tr>before and after the class="highlighted"rows.

表格行不能有边距值。你能增加填充吗？那行得通。否则，您可以在行<tr class="spacer"></tr>之前和之后插入一个class="highlighted"。

回答by Mark

The border-spacingproperty will work for this particular case.

该border-spacing属性将适用于这种特殊情况。

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

Reference.

参考。

回答by Mr Lister

You can't style the <tr>s themselves, but you can give the <td>s inside the "highlight" <tr>s a style, like this

你<tr>不能自己设置s 的样式，但是你可以<td>在 "highlight" <tr>sa 样式中给s ，就像这样

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

回答by Mehmet Eren Yener

line-height can be the possible solution

line-height 可以是可能的解决方案

tr
{
    line-height:30px;
}

回答by Jrd

I know this is kind of old, but I just got something along the same lines to work. Couldn't you do this?

我知道这有点旧，但我只是得到了一些类似的东西来工作。你不能这样做吗？

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

Hope this helps.

希望这可以帮助。

回答by Antoine Pelletier

First of all, don't try to put a margin to a <tr>or a <td>because it won't work in modern rendering.

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

• Solution 1

• 解决方案1

Although margin doesn't work, paddingdoes work :

虽然边距不起作用，但填充确实起作用：

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

Warning :This will also push the border further away from the element, if your border is visible, you might want to use solution 2 instead.

警告：这也会将边框推离元素更远，如果您的边框可见，您可能需要改用解决方案 2。

• Solution 2

• 解决方案2

To keep the border close to the element and mimic the margin, put another <tr>between each of your reel table's <tr>like so :

为了使边框靠近元素并模仿边距，请<tr>在每个卷轴表之间放置另一个，<tr>如下所示：

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

回答by John

This isn't going to be exactly perfect though I was happy to discover that you cancontrol the horizontal and vertical border-spacingseparately:

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

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

回答by meo

Because marginis ignored on tr, I usually use a workaround, by setting a transparent border-bottomor border-topand setting the background-clipproperty to padding-boxso the background-colordoes not get painted underneath the border.

因为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. Makes sure cells share a common border, but is completely optional. The solution works without it.
2. The 5pxvalue represents the margin that you want to achieve
3. Sets the background-colorof your row/cell
4. Makes sure the backgroundget not painted underneath the border

1. 确保单元格共享一个公共边界，但完全是可选的。该解决方案没有它。
2. 该5px值代表您想要达到的利润率
3. 设置background-color行/单元格的
4. 确保background不会在下面涂漆border

see a demo here: http://codepen.io/meodai/pen/MJMVNR?editors=1100

在此处查看演示：http: //codepen.io/meodai/pen/MJMVNR?editors=1100

background-clipis supported in all modern browser. (And IE9+)

background-clip所有现代浏览器都支持。（和 IE9+）

Alternatively you could use a border-spacing. But this will not work with border-collapseset to collapse.

或者，您可以使用border-spacing. 但这不适用于border-collapseset to collapse。

回答by Alex

A way to mimic the margin on the row would be to use the pseudo selector to add some spacing on the td.

模仿行上的边距的一种方法是使用伪选择器在td.

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

This way anything marked with the highlight class will be separated top and bottom.

这样，任何标有高亮类的东西都将被顶部和底部分开。

https://jsfiddle.net/d0zmsrfs/

https://jsfiddle.net/d0zmsrfs/

回答by Tomi Mickelsson

You might try to use CSS transforms for indenting a whole tr:

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

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

I think this is a valid solution. Seems to work fine in Firefox 16, Chrome 23 and Safari 6 on my OSX.

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