我有一个3 × 3的表。我需要一种方法为每一行tr的底部添加边界,并给它一个特定的颜色。
首先,我尝试了直接的方式,即:
<tr style="border-bottom:1pt solid black;">
但这并没有起作用。所以我添加了这样的CSS:
tr {
border-bottom: 1pt solid black;
}
但还是不管用。
我更喜欢使用CSS,因为这样我就不需要为每一行添加一个样式属性。 我还没有添加一个边界属性到<表>。我希望这不会影响我的CSS。
我有一个3 × 3的表。我需要一种方法为每一行tr的底部添加边界,并给它一个特定的颜色。
首先,我尝试了直接的方式,即:
<tr style="border-bottom:1pt solid black;">
但这并没有起作用。所以我添加了这样的CSS:
tr {
border-bottom: 1pt solid black;
}
但还是不管用。
我更喜欢使用CSS,因为这样我就不需要为每一行添加一个样式属性。 我还没有添加一个边界属性到<表>。我希望这不会影响我的CSS。
当前回答
另一个解决方案是border-spacing属性:
表td { Border-bottom: 2px纯黑色; } 表{ border-spacing: 0 px; } <表> < tr > ABC < td > < / td > < td > XYZ td > < / 表> < /
其他回答
另一个解决方案是border-spacing属性:
表td { Border-bottom: 2px纯黑色; } 表{ border-spacing: 0 px; } <表> < tr > ABC < td > < / td > < td > XYZ td > < / 表> < /
我试着加上
table {
border-collapse: collapse;
}
与
tr {
bottom-border: 2pt solid #color;
}
然后注释掉border-collapse,看看效果如何。只需要使用带有bottom-border属性的tr选择器就可以了!
没有边界CSS ex。
无边境照片直播
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;
}
这里有很多不完整的答案。因为你不能给tr标签加边框,你需要给td或者th标签加边框,就像这样:
td {
border-bottom: 1pt solid black;
}
这样做将在每个td之间留下一个小的空间,如果您希望边界看起来就像tr标签,这可能是不可取的。为了“填补空白”,你需要利用table元素的border-collapse属性,并将其值设置为collapse,如下所示:
table {
border-collapse: collapse;
}