如何给表添加页边距

我有一个包含许多行的表。其中一些行是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>
528250 次浏览
小开
最佳答案

表行不能有边距值。你能增加填充吗?这是可行的。否则，可以在class="highlighted"行前后插入<tr class="spacer"></tr>。

小开

你不能对__abc0本身进行样式化，但是你可以在&;highlight&;<tr>s是一种样式，像这样

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

你可以尝试使用CSS转换来缩进整个tr:

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

我认为这是一个有效的解决方案。在我的OSX上，火狐16、Chrome 23和Safari 6似乎都能正常运行。

小开

我有一个简单的方法:

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

这将在每行之间添加4px的垂直间距。如果你不想在最后一个子结点上得到这个边界

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

提醒一下，CSS3伪选择器只能在ie8及以下版本的selectivizr中工作。

小开

线高可以是可能的解决方案

tr
{
line-height:30px;
}
小开

在class="highlighted"之前添加这个样式 padding-bottom和 显示inline-table

小开

添加一个div到单元格，你想添加一些额外的间距:

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

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

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

Reference .。

小开

我知道这有点老了，但我也有类似的工作要做。你不能这样做吗?

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

希望这能有所帮助。

小开

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

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

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

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

小开
我放弃了，并插入了一个简单的jQuery代码如下所示。如果你像我一样有很多tr，这将在每个tr之后添加一个tr。 演示:https://jsfiddle.net/acf9sph6/ < / p > 
<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>
小开

给表行之间的页边距外观的一个hack是给它们一个与背景相同颜色的边框。这在样式化第三方主题时非常有用，您无法更改html标记。例如:

tr{
border: 5px solid white;
}
小开

因为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. 确保单元格共享公共边界，但这是完全可选的。没有它也能解决问题。
  2. 5px值代表你想要达到的裕度
  3. 设置行/单元格的background-color
  4. 确保background没有被画在border下面

在这里查看一个演示:http://codepen.io/meodai/pen/MJMVNR?editors=1100

background-clip在所有现代浏览器中被支持。(和IE9 +)

或者你也可以使用border-spacing。但是当border-collapse设置为collapse时，这将不起作用。

小开

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

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

这样，用高亮类标记的任何内容都将从上到下分开。

https://jsfiddle.net/d0zmsrfs/

小开

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

  • 解决方案1

虽然margin不能工作，但填充可以工作:

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

警告:这也将推动边界远离元素，如果你的边界是可见的，你可能想使用解决方案2代替。

  • 解决方案2

为了保持边界接近元素并模拟边缘，在每个reel表的<tr>之间放置另一个<tr>，如下所示:

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

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

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

CSS可以用来定位空的单元格，就像这样…

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

注意:只有当你的正常细胞都没有空的时候，这个方法才有用。

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

更不用说，你可以通过包含高度属性将空格的高度调整为你喜欢的任何高度。

小开

这并不会是完美的，尽管我很高兴地发现你可以控制水平和垂直border-spacing 分别:

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

不管怎样，我利用了我已经在使用bootstrap(4.3)的优势，因为我需要为我的行添加边距、box-shadow和border-radius，这是我不能用表格做的。

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

提交答案