我有一个3 × 3的表。我需要一种方法为每一行tr的底部添加边界，并给它一个特定的颜色。
首先，我尝试了直接的方式，即:
<tr style="border-bottom:1pt solid black;">
但这并没有起作用。所以我添加了这样的CSS:
tr {
border-bottom: 1pt solid black;
}
但还是不管用。
我更喜欢使用CSS，因为这样我就不需要为每一行添加一个样式属性。 我还没有添加一个边界属性到<表>。我希望这不会影响我的CSS。
当前回答
几个有趣的答案。因为你只是想要一个边界底部(或顶部)这里还有两个。假设你想要一个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>
其他回答
HTML
<tr class="bottom-border">
</tr>
CSS
tr.bottom-border {
border-bottom: 1px solid #222;
}
无CSS边框底部:
<table>
<thead>
<tr>
<th>Title</th>
</tr>
<tr>
<th>
<hr>
</th>
</tr>
</thead>
</table>
<td style=" font - family:宋体;Border-bottom:粗虚线#ff0000;" >
你也可以对整行做同样的处理。
有边界底部样式，边界顶部样式，边界左样式，边界右样式。或者简单的边框样式，同时应用于所有四个边框。
你可以在这里看到(并在网上尝试一下)更多细节
您可以使用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);
}
我以前遇到过类似的问题。我不认为tr可以直接采取边界样式。我的解决方法是在行中设置tds的样式:
<tr class="border_bottom">
CSS:
tr.border_bottom td {
border-bottom: 1px solid black;
}
