如何为表格行添加边距<tr> [重复]

【问题标题】：How to add a margin to a table row <tr> [duplicate]如何为表格行添加边距<tr> [重复]
【发布时间】：2012-05-28 06:02:13
【问题描述】：

我有一个包含许多行的表。其中一些行是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>

【问题讨论】：

CSS: how do I create a gap between rows in a table? 和 stackoverflow.com/questions/351058/… 的可能重复项
试试这个：tr.highlight td { position: relative;背景颜色：#EEEEEE；填充：5px 0 5px 0； }
如果您使用的是separated box model，我获得了您想要使用单元格元素（TD 和 TH）的边框的效果，而不是像@Jrd 建议的 TR：tr.highlight td {border-top : 10px 实心;边框底部：10px 实心；边框颜色：透明； }

标签： css

【解决方案1】：

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

【讨论】：

向<tr> 添加任何类型的填充不会移动任何内容，除非您指定display: block，此时<tr> 的宽度基于内容。不过，使用一组 height 添加建议的间隔器 <tr> 效果很好。
更准确地说，从CSS 2.1 开始就不能有边距值，但它可以直到CSS 2。我从来没有找到改变背后的原因。
是的，不幸的是tr 不能像史蒂夫写的那样有边距值。我为每个td 设置了保证金值，就像替换这个一样。 :( 在我看来，padding 不是解决方案，特别是如果行是不同的颜色（背景）并且你需要一些，比如说，空白（白色）空间。
这是一个有趣的解决方案。没有随机的不良做法。干得好。
spacer 在 Chrome 和 Firefox 中仍然有效，但是是 entirely obsolete, and must not be used by authors (whatwg.org)。

【解决方案2】：

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

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

Reference.

【讨论】：

但如果separate 边框无法与tr 一起使用，有什么解决方法吗？
@PardeepJain 像 box-shadow 一样的盒子阴影：0px 0px 0px 1px black；会达到同样的效果
似乎我无法设置一侧（顶部或底部）的间距，只能设置两者。否则似乎工作。谢谢！
@aexl 尝试使用 4 个值而不是 2 个值，然后调整它。

【解决方案3】：

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

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

【讨论】：

这只有在td background-color 与tr 相同时才会在视觉上起作用。

【解决方案4】：

line-height 是可能的解决方案

tr
{
    line-height:30px;
}

【讨论】：

有了这个我不能使用vertical-align:bottom。
除非在任何一个子中有不止一行 - 每行都会“更高”。在这种情况下，样式填充的答案起作用。

【解决方案5】：

虽然我很高兴地发现您可以控制水平和垂直border-spacing，但这并不完全完美：

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

【讨论】：

这不是和我上面的回答一样吗？
@Mark 你懒得澄清你的答案。
好的，抱歉，不确定您需要哪种说明。请告诉我。
@Mark above 和 below 此处随时间变化并与所选排序相关。

【解决方案6】：

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

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

希望这会有所帮助。

【讨论】：

谢谢，但必须移动 TD 元素上的属性才能使其正常工作：tr.highlight td { border-top: 10px solid;边框底部：10px 实心；边框颜色：透明； }
如果你真的想在它上面加个边框，那是行不通的。

【解决方案7】：

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

解决方案 1

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

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

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

解决方案 2

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

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

【讨论】：

不过，这不一定会产生预期的效果。例如，如果该行有一个顶部或底部边框，则此 CSS 添加的空间将在边框内，而您希望它在外边距。
@PhilipStratford 我真的很高兴你强迫我进化，回答已编辑。
很高兴能帮上忙。正如您在第二个解决方案中所描述的那样，我认为“虚拟”行确实是实现这一目标的唯一方法，正如 Steve Binder 接受的答案所说的那样。
@PhilipStratford 所有人都同意，现代 css 渲染无法完成像分隔两个表格行这样简单的事情，这几乎是一种耻辱......
height 为我工作。好的是如果您指定的高度太小而无法显示内容，它仍然会扩展以适应内容。

【解决方案8】：

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

确保单元格共享一个共同的边界，但完全是可选的。没有它，解决方案也能正常工作。
5px 值表示您想要达到的边距
设置行/单元格的background-color
确保background 没有被绘制在border 下方

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

all modern browser 支持background-clip。（以及 IE9+）

您也可以使用border-spacing。但这不适用于将border-collapse 设置为collapse。

【讨论】：

到代码笔的链接断开 (404)。

【解决方案9】：

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

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

这样任何标有高亮类的东西都会上下分开。

https://jsfiddle.net/d0zmsrfs/

【讨论】：

【解决方案10】：

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

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

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

【讨论】：

【解决方案11】：

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

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

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

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

提醒 CSS3 伪选择器仅适用于 IE 8 及更低版本的 selectivizr。

【讨论】：

这是真正的方法。简单而且非常不烦人。我自己也得出了同样的结论。你错过了一件事，给边框一个透明的颜色...border-bottom: 10px solid transparent
谢谢！非常简单，甚至只允许在某些行之间指定边框

【解决方案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>

【讨论】：

这是一个很好的解决方案！特别是对于大型动态表。

【解决方案13】：

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

tr{ 
    border: 5px solid white;
}

【讨论】：

【解决方案14】：

向要添加额外间距的单元格添加一个 div：

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

【讨论】：

【解决方案15】：

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

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

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

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

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

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

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

【讨论】：

【解决方案16】：

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

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

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

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

【讨论】：

【解决方案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;
        }
    }
}

【讨论】：

【解决方案18】：

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

【讨论】：