css - How to add a margin to a table row

Question

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.

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.

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

score 182 · Accepted Answer

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

score 180 · Accepted Answer

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

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

参考。

score 64 · Accepted Answer

您<tr>不能自己设置 s 的样式，但可以<td>在“突出显示” <tr>sa 样式中赋予 s ，就像这样

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

score 34 · Accepted Answer

34

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

tr
{
    line-height:30px;
}

于 2014-02-24T21:58:54.673 回答

score 32 · Accepted Answer

尽管我很高兴地发现您可以分别控制水平和垂直边框间距，但这并不完美：

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

score 28 · Accepted Answer

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

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

希望这可以帮助。

score 28 · Accepted Answer

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

解决方案 1

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

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

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

解决方案 2

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

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

score 9 · Accepted Answer

因为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] */
}

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

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

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

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

score 8 · Accepted Answer

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

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

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

https://jsfiddle.net/d0zmsrfs/

score 6 · Accepted Answer

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

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

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

score 4 · Accepted Answer

这是我做的一个巧妙的方法：

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

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

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

提醒 CSS3 伪选择器只能在 IE 8 及更低版本中使用 selectivizr。

score 4 · Accepted Answer

让表格行之间的边距外观的一种技巧是给它们一个与背景颜色相同的边框。这在为无法更改 html 标记的 3rd 方主题设置样式时很有用。例如：

tr{ 
    border: 5px solid white;
}

score 4 · Accepted Answer

我放弃并插入了一个简单的 jQuery 代码，如下所示。如果你有很多像我这样的 tr，这将在每个 tr 之后添加一个 tr。演示：https ://jsfiddle.net/acf9sph6/

<table>
  <tbody>
     <tr class="my-tr">
        <td>one line</td>
     </tr>
     <tr class="my-tr">
        <td>one line</td>
     </tr>
     <tr class="my-tr">
        <td>one line</td>
     </tr>
  </tbody>
</table>
<script>
$(function () {
       $("tr.my-tr").after('<tr class="tr-spacer"/>');
});
</script>
<style>
.tr-spacer
{
    height: 20px;
}
</style>

score 3 · Accepted Answer

将 div 添加到要添加一些额外间距的单元格中：

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

score 3 · Accepted Answer

您可以通过像这样添加一个空的单元格行来在表格行之间创建空间......

<tr><td></td><td></td></tr>

然后可以使用 CSS 来定位像这样的空单元格……</p>

table :empty{border:none; height:10px;}

注意：只有当您的正常单元格都不会为空/空时，此技术才有效。

即使是不间断的空格也可以避免单元格被上面的 CSS 规则定位。

不用说，您可以使用包含的height属性将空间的高度调整为您喜欢的任何值。

score 1 · Accepted Answer

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

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

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

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

score 1 · Accepted Answer

值得一提的是，我利用了我已经在使用 bootstrap (4.3)，因为我需要在我的行中添加边距、框阴影和边框半径，这是我不能用表格做的。

<div id="loop" class="table-responsive px-4">
<section>
    <div id="thead" class="row m-0">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
    </div>
    <div id="tbody" class="row m-0">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
    </div>
</section>
</div>

在 css 上，我添加了几行来维护引导程序的表行为

@media (max-width: 800px){
    #loop{
        section{
            min-width: 700px;
        }
    }
}

score 0 · Accepted Answer

0

在 class="highlighted" padding-bottom 之前添加此样式，显示为 inline-table

于 2014-08-19T13:53:04.620 回答

css - How to add a margin to a table row

18 回答 18

Related

Reference