我有一个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-collapse:collapse到你的表格规则中:
table {
border-collapse: collapse;
}
例子
表{ border-collapse:崩溃; } tr { 底边:1pt纯黑色; } <表> A1 < tr > < td > < / td > < td > B1 < / td > < td > C1 < / td > < / tr > < tr > < td > A2 < / td > < td > B2 < / td > < td > C2 < / td > < / tr > < tr > < td > A2 < / td > < td > B2 < / td > < td > C2 < / td > < / tr > 表> < /
Link
其他回答
Use
border-collapse:像Nathan写的那样崩溃,你需要设置
Td {border-bottom: 1px solid #000;}
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;
}
你不能给tr元素加边框。这在firefox和IE 11中都适用:
<td style='border-bottom:1pt solid black'>
<td style=" font - family:宋体;Border-bottom:粗虚线#ff0000;" >
你也可以对整行做同样的处理。
有边界底部样式,边界顶部样式,边界左样式,边界右样式。或者简单的边框样式,同时应用于所有四个边框。
你可以在这里看到(并在网上尝试一下)更多细节