我有一个3 × 3的表。我需要一种方法为每一行tr的底部添加边界，并给它一个特定的颜色。
首先，我尝试了直接的方式，即:
<tr style="border-bottom:1pt solid black;">
但这并没有起作用。所以我添加了这样的CSS:
tr {
border-bottom: 1pt solid black;
}
但还是不管用。
我更喜欢使用CSS，因为这样我就不需要为每一行添加一个样式属性。 我还没有添加一个边界属性到<表>。我希望这不会影响我的CSS。
当前回答
我发现在使用这种方法时，td元素之间的空间会在边界上形成一个间隙，但不用担心…
解决这个问题的一个方法是:
<tr>
<td>
Example of normal table data
</td>
<td class="end" colspan="/* total number of columns in entire table*/">
/* insert nothing in here */
</td>
</tr>
使用CSS:
td.end{
border:2px solid black;
}
其他回答
我试着加上
table {
border-collapse: collapse;
}
与
tr {
bottom-border: 2pt solid #color;
}
然后注释掉border-collapse，看看效果如何。只需要使用带有bottom-border属性的tr选择器就可以了!
没有边界CSS ex。
无边境照片直播
CSS边界前。
表与边境照片现场
另一个解决方案是border-spacing属性:
表td { Border-bottom: 2px纯黑色; ｝ 表{ border-spacing: 0 px; ｝ <表> < tr > ABC < td > < / td > < td > XYZ td > < / 表> < /
Use
border-collapse:像Nathan写的那样崩溃，你需要设置
Td {border-bottom: 1px solid #000;｝
您可以使用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元素加边框。这在firefox和IE 11中都适用:
<td style='border-bottom:1pt solid black'>
