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

当前回答

在class="highlighted"之前添加此样式 padding-bottom和 显示为内联表

其他回答

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

tr{ 
    border: 5px solid white;
}

你不能给<tr>本身设置样式,但是你可以给<td>在"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似乎都能正常运行。

不管怎样,我利用了我已经在使用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;
        }
    }
}

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