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

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

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

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

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

但还是不管用。

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


当前回答

HTML

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

CSS

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

其他回答

您可以使用box-shadow属性来模拟tr元素的边界。调整box-shadow的Y位置(下面表示为2px)来调整厚度。

tr {
  -webkit-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
  -moz-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
  box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
}

无CSS边框底部:

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

Use

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

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

使用border-collapse:折叠桌面和边框底部:1pt纯黑色;在电话里

几个有趣的答案。因为你只是想要一个边界底部(或顶部)这里还有两个。假设你想要一个3px厚的蓝色边框。在样式部分可以添加

.blueB {background-color:blue; height:3px} or
hr {background-color:blue; color:blue height:3px}

在表格代码中也一样

<tr><td colspan='3' class='blueB></td></tr> or
<tr><td colspan='3'><hr></td></tr>