如何为表格行添加页边距<tr>
我有一个包含许多行的表。 其中一些行是class="highlight" ，表示需要以不同的方式进行样式设置并突出显示。 我想要做的是在这些行之前和之后添加一些额外的间距，使它们与其他行稍微分开。
我想我可以用margin-top:10px;margin-bottom:10px;来完成这个工作margin-top:10px;margin-bottom:10px; 但它不工作。 任何人都知道如何做到这一点，或者如果可以做到的话？ 这里是HTML，我已经把tbody中的第二个tr设置为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>
表格行不能有边距值。 你能增加填充吗？ 这将工作。 否则，您可以在class="highlighted"行之前和之后插入<tr class="spacer"></tr> 。
你不能自己devise<tr>的样式，但是你可以在<td> highlight> <tr> sa样式中给出<td> s，像这样
tr.highlight td {padding-top: 10px; padding-bottom:10px}
border-spacing属性将适用于这个特定的情况。
table { border-collapse:separate; border-spacing: 0 1em; }
参考 。
行高可能是可能的解决scheme
tr { line-height:30px; }
我知道这有点古怪，但我只是沿着同样的路线find了一些工作。 你不能这样做吗？
tr.highlight { border-top: 10px solid; border-bottom: 10px solid; border-color: transparent; }
希望这可以帮助。
由于在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] */ }
- 确保单元共享一个共同的边界，但是完全是可选的。 解决scheme没有它。
-
5px值表示您想要达到的边距 - 设置行/单元格的
background-color - 确保
background不被绘制在border下面
在这里看到一个演示： http : //codepen.io/meodai/pen/MJMVNR?editors=1100
所有现代浏览器都支持background-clip 。 （和IE9 +）
或者，你可以使用border-spacing 。 但是，这不会与border-collapse设置collapse 。
这是我做的一个整洁的方式：
table tr { border-bottom: 4px solid; }
这将在每行之间添加4px的垂直间距。 如果你不想在最后一个孩子身上find这个边界：
table tr:last-child { border-bottom: 0; }
提醒CSS3伪select器只能在IE 8及以下版本中使用selectivizr。
给表格行之间的边距外观的黑客是给他们一个边框与背景相同的颜色。 当您无法更改html标记时，在devise第三方主题时这非常有用。 例如：
tr{ border: 5px solid white; }
一种模拟行上边距的方法是使用伪select器在td上添加一些间距。
.highlight td::before, .highlight td::after { content:""; height:10px; display:block; }
这样一来，任何用高亮类标记的东西都会被分开。
您可能会尝试使用CSS变换缩进整个tr：
tr.indent { -webkit-transform: translate(20px,0); -moz-transform: translate(20px,0); }
我认为这是一个有效的解决scheme。 似乎在我的OSX上的Firefox 16，Chrome 23和Safari 6上正常工作。
我强烈build议你看看你的分析，看看你有多lessIE7或更less的用户访问该网站。 我发现我现在能够放弃对IE7的支持，这意味着我可以使用CSS表…这将使事情变得更容易。
在class =“highlight”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; }
另一种可能性是使用伪select器：after或：before
tr.highlight td:last-child:after { content: "\0a0"; line-height: 3em; }
这可能会避免浏览器不理解伪select器，加上背景颜色不是问题。
然而不利的一面是，它在最后一个单元之后增加了一些额外的空白。
我放弃了，并插入一个简单的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>
