添加border-bottom到表行<tr>

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

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

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

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

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

但还是不管用。

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

当前回答

你不能给tr元素加边框。这在firefox和IE 11中都适用:

<td style='border-bottom:1pt solid black'>

其他回答

将行显示为块。

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

简单地显示交替颜色:

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

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

<tr class="border_bottom">

CSS:

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

HTML

<tr class="bottom-border">
</tr>

CSS

tr.bottom-border {
  border-bottom: 1px solid #222;
}

你不能给tr元素加边框。这在firefox和IE 11中都适用:

<td style='border-bottom:1pt solid black'>

Use

border-collapse:像Nathan写的那样崩溃，你需要设置

Td {border-bottom: 1px solid #000;｝

推荐文章