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

Question

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

我

以为我可以用margin-top:10px;margin-bottom:10px;完成这项工作，但它不起作用。有人知道如何做到这一点，或者是否可以做到这一点？这是 HTML，我已经将正文中的第二个 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

border-spacing 属性适用于此特定情况。

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

参考资料。

Answer 2

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

Answer 3

你不能设置<tr>本身的样式，但你可以给"突出显示"<tr>中的<td> s一个样式，就像这样

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

Answer 4

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

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

Answer 5

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

tr
{
    line-height:30px;
}

Answer 6

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

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

希望这有帮助。

Answer 7

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

• 解决方案 1

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

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

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

• 解决方案 2

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

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

Answer 8

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

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

这样，任何标有突出显示类的内容都将在顶部和底部分开。

https://jsfiddle.net/d0zmsrfs/

Answer 9

因为在tr上忽略margin，我通常使用解决方法，通过设置透明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 .但这不适用于设置为collapse border-collapse。

Answer 10

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

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

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

Answer 11

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

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

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

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

提醒一下，CSS3伪选择器仅适用于带有选择性的IE 8及更低版本。

Answer 12

我放弃了，插入了一个简单的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>

Answer 13

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

tr{ 
    border: 5px solid white;
}

Answer 14

在要

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

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

Answer 15

您可以通过添加一行空的单元格来在表格行之间创建空间，如下所示...

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

然后可以使用CSS来定位空单元格，如下所示...

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

注意：这种技术只有在正常细胞都不是空的/空的时才好。

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

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

Answer 16

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

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

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

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

Answer 17

值得一提的是，我利用了我已经在使用 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;
        }
    }
}

Answer 18

在 class="突出显示" 之前添加此样式填充底部和显示是内联表