Add border-bottom to table row
我有一个3 x 3的表。我需要一种为每行tr 的底部添加边框并为其指定特定颜色的方法。
首先，我尝试了直接方法，即：
1
<tr style="border-bottom:1pt solid black;">
但这没有用。 所以我像这样添加了CSS：
1
2
3
tr {
border-bottom: 1pt solid black;
}
那仍然没有用。
我更喜欢使用CSS，因为这样我就不必在每行中添加style 属性。
我没有向
添加border 属性。 我希望那不会影响我的CSS。
-
附带说明一下，如果内联样式(问题中的第一个示例)不起作用，则嵌入式样式(第二个示例)不太可能起作用。 您还应该研究您尝试设置样式的元素的属性的可用性：w3.org/TR/html-markup/tr.html
-
如果要为表格tr设置边框底部，可以遵循jsfiddle.net/7awN4
-
请注意，以鼓励未来的搜索者向下滚动到@Nathan Manousoss答案，以下可能是您正在寻找的解决方案
将border-collapse:collapse 添加到您的表规则中：
1
2
3
table {
border-collapse: collapse;
}
链接
-
这本身不起作用。您仍然不能设置行的样式，但是可以设置单元格的样式。
-
你错了，@ Renan。崩溃的边框模型正是使行边框可样式化的原因。根据CSS sectoin 17.6：在单独的边框模型中，"行不能有边框(即用户代理必须忽略这些元素的边框属性)。""在折叠的边框模型中，可以指定围绕单元格的全部或部分，行[和]行组[...]的边框"，顺便说一句：它确实可以在我的浏览器中使用(Chromium 37)。
-
FF不支持。
-
我认为有些人可能会感到困惑(就像我一样)，并没有意识到要在表格上而不是在行上设置边框折叠样式。
-
我认为这应该是公认的答案。
-
至少在ver 53中，它现在可以与FF一起使用
-
谢谢。这应该是公认的答案。
-
更好的链接
我以前有这样的问题。我认为tr 不能直接采用边框样式。我的解决方法是在行中设置td 的样式：
1
<tr class="border_bottom">
CSS：
1
2
3
tr.border_bottom td {
border-bottom:1pt solid black;
}
-
请注意，使用此解决方案，您很有可能在tds之间的边界上留有空隙。 simoncereskas的答案可以解决此问题，但请注意，虚线或虚线边框类型可能看起来不太好(因为它们不是连续的)
-
您还可以通过将
cellspacing="0" 作为属性添加到
来解决此问题(请参阅此问题)。但是，不知道带有虚线或虚线边框的外观如何。
-
tr 可以在折叠的边框模型中采用边框样式。 @Sangram，考虑接受一个考虑到该问题的答案，而不是这个答案，不是吗？
-
这在IE中有效，其他答案没有:)
-
如果表格单元格之间有填充，这将不起作用。如果有填充物，则边框将被分割为整块。
-
并且您的表格需要这种样式
在表上使用border-collapse:collapse ，在tr上使用border-bottom: 1pt solid black;
-
即使在边框折叠的情况下，在tr上设置边框也是没有用的。您必须将其设置在tr的tds上
-
@RaduSimionescu错误，它在
tr 上效果很好，边框已折叠。
-
这在Firefox 42.0中不起作用。
-
在Firefox 38.4.0中，它对我来说非常理想。
-
在FF 45.0.1中无效。
-
实际上，这似乎有效
采用
如Nathan所写的border-collapse:collapse ，您需要设置
td { border-bottom: 1px solid #000; }
-
那就是我也会这样做的方式！在td上添加边框，并在表上使用border-collapse
-
很好谢谢！
这里有很多不完整的答案。由于无法将边框应用于tr 标签，因此需要将其应用于td 或th 标签，如下所示：
1
2
3
td {
border-bottom: 1pt solid black;
}
这样做会在每个td 之间留一个很小的空间，如果您希望边框看起来像是tr 标记，则可能不希望这样做。为了填补空白，您需要利用table 元素上的border-collapse 属性并将其值设置为collapse ，如下所示：
1
2
3
table {
border-collapse: collapse;
}
将行显示为块。
1
2
3
4
tr {
display: block;
border-bottom: 1px solid #000;
}
并简单地显示其他颜色：
1
2
3
4
tr.oddrow {
display: block;
border-bottom: 1px solid #F00;
}
-
为
tr 设置display: block 不是一个好主意。改为使用tr td { border-bottom: ... } 广告tr.oddrow td { border-bottom: ... }
-
display block可能会破坏表格布局。border-collapse：表格本身的折叠绝对是最好的解决方案
采用
1
2
table{border-collapse:collapse}
tr{border-top:thin solid}
用CSS属性替换"薄固体"。
我尝试添加
1
2
3
table {
border-collapse: collapse;
}
旁边
1
2
3
tr {
bottom-border: 2pt solid #color;
}
然后注释掉边界崩溃以查看有效方法。只是让具有底部边界属性的tr选择器对我有用！
没有Border CSS ex。
无边框照片直播
CSS Border ex。
带有边框照片的桌子直播
您可以使用box-shadow 属性来伪造tr 元素的边框。调整box-shadow 的Y位置(以下表示为2px)以调整厚度。
1
2
3
4
5
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);
}
我发现使用此方法时，td元素之间的间隔会在边框中形成间隙，但不要担心...
解决此问题的一种方法：
1
2
3
4
5
6
7
8
9
<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：
1
2
3
td.end{
border:2px solid black;
}
您也可以对整个行执行相同的操作。
有border-bottom-style ，border-top-style ，border-left-style ，border-right-style 。或者简单地将border-style 一次应用于所有四个边界。
您可以在此处查看(并在线尝试)更多详细信息
几个有趣的答案。由于您只想要边框的底部(或顶部)，这里还有两个。假设您想要一个3px厚的蓝色边框。在样式部分，您可以添加
1
2
.blueB {background-color:blue; height:3px} or
hr {background-color:blue; color:blue height:3px}
在表格代码中
1
2
<tr><td colspan='3' class='blueB></td></tr> or
<tr><td colspan='3'></td></tr>
没有CSS边框底部：
1
2
3
4
5
6
7
8
9
10
11
12
<table>
<thead>
<tr>
<th>Title</th>
</tr>
<tr>
<th>
</th>
</tr>
</thead>
</table>
您不能在tr元素上加边框。这在firefox和IE 11中对我有用：
1
<td style='border-bottom:1pt solid black'>
-
谢谢，乔希。我做错了什么？
-
您不能在tr上加边框。编辑答案以澄清这一点。
-
那就是最简单，最准确的答案。
另一个解决方案是border-spacing 属性：
1
2
3
4
5
6
7
table td {
border-bottom: 2px solid black;
}
table {
border-spacing: 0px;
}
1
2
3
4
5
<table>
<tr>
<td>ABC</td>
<td>XYZ</td>
</table>
HTML
1
2
<tr class="bottom-border">
</tr>
CSS
1
2
3
tr.bottom-border {
border-bottom: 1px solid #222;
}
-
没有边界崩溃就没用：崩溃;
Copyright © 码农家园 联系：[email protected]
我有一个3 x 3的表。我需要一种为每行
首先，我尝试了直接方法，即：
1 | <tr style="border-bottom:1pt solid black;"> |
但这没有用。 所以我像这样添加了CSS：
1 2 3 | tr { border-bottom: 1pt solid black; } |
那仍然没有用。
我更喜欢使用CSS，因为这样我就不必在每行中添加
我没有向
1 2 3 | table { border-collapse: collapse; } |
链接
- 这本身不起作用。您仍然不能设置行的样式，但是可以设置单元格的样式。
- 你错了，@ Renan。崩溃的边框模型正是使行边框可样式化的原因。根据CSS sectoin 17.6：在单独的边框模型中，"行不能有边框(即用户代理必须忽略这些元素的边框属性)。""在折叠的边框模型中，可以指定围绕单元格的全部或部分，行[和]行组[...]的边框"，顺便说一句：它确实可以在我的浏览器中使用(Chromium 37)。
- FF不支持。
- 我认为有些人可能会感到困惑(就像我一样)，并没有意识到要在表格上而不是在行上设置边框折叠样式。
- 我认为这应该是公认的答案。
- 至少在ver 53中，它现在可以与FF一起使用
- 谢谢。这应该是公认的答案。
- 更好的链接
我以前有这样的问题。我认为
1 | <tr class="border_bottom"> |
CSS：
1 2 3 | tr.border_bottom td { border-bottom:1pt solid black; } |
- 请注意，使用此解决方案，您很有可能在tds之间的边界上留有空隙。 simoncereskas的答案可以解决此问题，但请注意，虚线或虚线边框类型可能看起来不太好(因为它们不是连续的)
-
您还可以通过将
cellspacing="0" 作为属性添加到来解决此问题(请参阅此问题)。但是，不知道带有虚线或虚线边框的外观如何。
tr 可以在折叠的边框模型中采用边框样式。 @Sangram，考虑接受一个考虑到该问题的答案，而不是这个答案，不是吗？- 这在IE中有效，其他答案没有:)
- 如果表格单元格之间有填充，这将不起作用。如果有填充物，则边框将被分割为整块。
- 并且您的表格需要这种样式
在表上使用
border-collapse:collapse ，在tr上使用border-bottom: 1pt solid black; - 即使在边框折叠的情况下，在tr上设置边框也是没有用的。您必须将其设置在tr的tds上
-
@RaduSimionescu错误，它在
tr 上效果很好，边框已折叠。 - 这在Firefox 42.0中不起作用。
- 在Firefox 38.4.0中，它对我来说非常理想。
- 在FF 45.0.1中无效。
- 实际上，这似乎有效
采用
如Nathan所写的
border-collapse:collapse ，您需要设置td { border-bottom: 1px solid #000; } - 那就是我也会这样做的方式！在td上添加边框，并在表上使用border-collapse
- 很好谢谢！
这里有很多不完整的答案。由于无法将边框应用于
tr 标签，因此需要将其应用于td 或th 标签，如下所示：1
2
3td {
border-bottom: 1pt solid black;
}这样做会在每个
td 之间留一个很小的空间，如果您希望边框看起来像是tr 标记，则可能不希望这样做。为了填补空白，您需要利用table 元素上的border-collapse 属性并将其值设置为collapse ，如下所示：1
2
3table {
border-collapse: collapse;
}
将行显示为块。
1
2
3
4tr {
display: block;
border-bottom: 1px solid #000;
}并简单地显示其他颜色：
1
2
3
4tr.oddrow {
display: block;
border-bottom: 1px solid #F00;
}-
为
tr 设置display: block 不是一个好主意。改为使用tr td { border-bottom: ... } 广告tr.oddrow td { border-bottom: ... } - display block可能会破坏表格布局。border-collapse：表格本身的折叠绝对是最好的解决方案
采用
1
2table{border-collapse:collapse}
tr{border-top:thin solid}用CSS属性替换"薄固体"。
我尝试添加
1
2
3table {
border-collapse: collapse;
}旁边
1
2
3tr {
bottom-border: 2pt solid #color;
}然后注释掉边界崩溃以查看有效方法。只是让具有底部边界属性的tr选择器对我有用！
没有Border CSS ex。
无边框照片直播
CSS Border ex。
带有边框照片的桌子直播
您可以使用
box-shadow 属性来伪造tr 元素的边框。调整box-shadow 的Y位置(以下表示为2px)以调整厚度。1
2
3
4
5tr {
-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);
}
我发现使用此方法时，td元素之间的间隔会在边框中形成间隙，但不要担心...
解决此问题的一种方法：
1
2
3
4
5
6
7
8
9<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：
1
2
3td.end{
border:2px solid black;
}
您也可以对整个行执行相同的操作。
有
border-bottom-style ，border-top-style ，border-left-style ，border-right-style 。或者简单地将border-style 一次应用于所有四个边界。您可以在此处查看(并在线尝试)更多详细信息
几个有趣的答案。由于您只想要边框的底部(或顶部)，这里还有两个。假设您想要一个3px厚的蓝色边框。在样式部分，您可以添加
1
2.blueB {background-color:blue; height:3px} or
hr {background-color:blue; color:blue height:3px}在表格代码中
1
2<tr><td colspan='3' class='blueB></td></tr> or
<tr><td colspan='3'></td></tr>
没有CSS边框底部：
1
2
3
4
5
6
7
8
9
10
11
12<table>
<thead>
<tr>
<th>Title</th>
</tr>
<tr>
<th>
</th>
</tr>
</thead>
</table>
您不能在tr元素上加边框。这在firefox和IE 11中对我有用：
1<td style='border-bottom:1pt solid black'>- 谢谢，乔希。我做错了什么？
- 您不能在tr上加边框。编辑答案以澄清这一点。
- 那就是最简单，最准确的答案。
另一个解决方案是
border-spacing 属性：1
2
3
4
5
6
7table td {
border-bottom: 2px solid black;
}
table {
border-spacing: 0px;
}1
2
3
4
5<table>
<tr>
<td>ABC</td>
<td>XYZ</td>
</table>
HTML
1
2<tr class="bottom-border">
</tr>CSS
1
2
3tr.bottom-border {
border-bottom: 1px solid #222;
}- 没有边界崩溃就没用：崩溃;
Copyright © 码农家园 联系：[email protected]
