如何添加一个页边距表行<tr>

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

当前回答

我有一个简单的方法:

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

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

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

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

2013-08-22 21:24:02

其他回答

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

2019-03-06 04:09:01

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

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

希望这能有所帮助。

2015-07-16 19:23:39

我有一个简单的方法:

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

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

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

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

2013-08-22 21:24:02

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

tr
{
    line-height:30px;
}

2014-02-24 21:58:54

这并不完美，但我很高兴地发现你可以分别控制水平和垂直边界间距:

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

2018-05-25 07:39:26

如何添加一个页边距表行<tr>

推荐文章

最新文章

标签