我有一个3 × 3的表。我需要一种方法为每一行tr的底部添加边界,并给它一个特定的颜色。

首先,我尝试了直接的方式,即:

<tr style="border-bottom:1pt solid black;">

但这并没有起作用。所以我添加了这样的CSS:

tr {
border-bottom: 1pt solid black;
}

但还是不管用。

我更喜欢使用CSS,因为这样我就不需要为每一行添加一个样式属性。 我还没有添加一个边界属性到<表>。我希望这不会影响我的CSS。


当前回答

我试着加上

    table {
      border-collapse: collapse;
    }   

    tr {
      bottom-border: 2pt solid #color;
    }

然后注释掉border-collapse,看看效果如何。只需要使用带有bottom-border属性的tr选择器就可以了!

没有边界CSS ex。

无边境照片直播

CSS边界前。

表与边境照片现场

其他回答

无CSS边框底部:

<table>
    <thead>
        <tr>
            <th>Title</th>
        </tr>
        <tr>
            <th>
                <hr>
            </th>
        </tr>
    </thead>
</table>

这里有很多不完整的答案。因为你不能给tr标签加边框,你需要给td或者th标签加边框,就像这样:

td {
  border-bottom: 1pt solid black;
}

这样做将在每个td之间留下一个小的空间,如果您希望边界看起来就像tr标签,这可能是不可取的。为了“填补空白”,你需要利用table元素的border-collapse属性,并将其值设置为collapse,如下所示:

table {
  border-collapse: collapse;
}

Use

table{border-collapse:collapse}
tr{border-top:thin solid}

将“thin solid”替换为CSS属性。

我以前遇到过类似的问题。我不认为tr可以直接采取边界样式。我的解决方法是在行中设置tds的样式:

<tr class="border_bottom">

CSS:

tr.border_bottom td {
  border-bottom: 1px solid black;
}

将行显示为块。

tr {
    display: block;
    border-bottom: 1px solid #000;
}

简单地显示交替颜色:

tr.oddrow {
    display: block;
    border-bottom: 1px solid #F00;
}