Question

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

我以为我可以用margin-top:10px;margin-bottom:10px;完成这项任务，但它无效。任何人都知道如何完成这项工作，或者是否可以完成？这是HTML，我已经将第二个tr设置为tbody到类高亮。

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

<强> Reference

Answer 3

你不能自己设置<tr>的样式，但是你可以将<td>置于“突出显示”<tr>内的样式，如下所示

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

Answer 4

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

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

希望这有帮助。

Answer 5

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

tr
{
    line-height:30px;
}

Answer 6

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

解决方案1

虽然保证金不起作用，填充确实有效：

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

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

解决方案2

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

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

Answer 7

由于在margin上忽略了tr，我通常会使用一种解决方法，设置透明的border-bottom或border-top并将background-clip属性设置为{ {1}}因此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

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

all modern browser

border。（和IE9 +）

或者您可以使用background-clip。但这不适用于设置为border-spacing的{{1}}。

Answer 8

虽然我很高兴发现你可以分别控制水平和垂直border-spacing ，但这并不完美。

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

Answer 9

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

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

这样，标有高亮等级的任何内容都将在顶部和底部分开。

https://jsfiddle.net/d0zmsrfs/

Answer 10

在表行之间给出边距外观的hack是为它们提供与背景颜色相同的边框。在为无法更改html标记的第三方主题设置样式时，这非常有用。例如：

tr{ 
    border: 5px solid white;
}

Answer 11

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

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

这将在每行之间添加4px的垂直间距。如果你想在最后一个孩子身上没有这个边界：

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

提醒CSS3伪选择器只能在IE 8及以下版本中使用选择器。

Answer 12

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

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

我认为这是一个有效的解决方案。在我的OSX上似乎可以在Firefox 16，Chrome 23和Safari 6中正常工作。

Answer 13

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

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

Answer 14

我放弃了并插入了一个简单的jQuery代码，如下所示。如果你有这么多像我一样的话，这会在每个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>

Answer 15

在class =“highlight”之前添加此样式填充底部和 display是内联表

Answer 16

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

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

这可能会避免浏览器无法理解伪选择器的问题，加上背景色也不是问题。

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

Answer 17

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

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

然后可以使用CSS来定位像这样的空单元格......

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

注意：只有当你的正常细胞都没有空/空时，这项技术才有用。

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

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

Answer 18

对于有价值的东西，我利用了我已经在使用引导程序（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上，我添加了几行内容来保持bootstrap的表行为

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

Answer 19

我强烈建议您查看一下您的分析，看看您访问该网站的IE7或更少用户数量。我发现我现在能够放弃对IE7的支持，这意味着我可以使用CSS表格...这将使事情变得更容易。

如何向表行添加边距

19 个答案: