Html 将边框底部添加到表格行 <tr>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10040842/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add border-bottom to table row <tr>
提问by Sangram Nandkhile
I have a table of 3 by 3. I need a way to add a border for the bottom of every row trand give it a specific color.
我有一个 3 x 3 的表格。我需要一种方法来为每一行的底部添加边框tr并为其指定特定颜色。
First I tried the direct way, i.e.:
首先我尝试了直接的方式，即：
<tr style="border-bottom:1pt solid black;">
But that didn't work. So I added CSS like this:
但这没有用。所以我添加了这样的 CSS：
tr {
border-bottom: 1pt solid black;
}
That still didn't work.
那还是不行。
I would prefer to use CSS because then I don't need to add a styleattribute to every row.
I haven't added a borderattribute to the <table>. I hope that that is not affecting my CSS.
我更喜欢使用 CSS，因为这样我就不需要style为每一行添加一个属性。我还没有添加border到属性<table>。我希望这不会影响我的 CSS。
回答by Nathan Manousos
Add border-collapse:collapseto your table rule:
添加border-collapse:collapse到您的表格规则：
table {
border-collapse: collapse;
}
回答by tsherif
I had a problem like this before. I don't think trcan take a border styling directly. My workaround was to style the tds in the row:
我以前遇到过这样的问题。我认为tr不能直接采用边框样式。我的解决方法是设置td行中的s样式：
<tr class="border_bottom">
CSS:
CSS：
tr.border_bottom td {
border-bottom:1pt solid black;
}
回答by Jpduro
Use border-collapse:collapseon table and border-bottom: 1pt solid black;on the tr
用border-collapse:collapse在桌子border-bottom: 1pt solid black;上和tr上
回答by simoncereska
Use
用
border-collapse:collapseas Nathan wrote and you need to set
border-collapse:collapse正如内森所写，你需要设置
td { border-bottom: 1px solid #000; }
td { border-bottom: 1px solid #000; }
回答by dmeyer
There are lot of incomplete answers here. Since you cannot apply a border to trtag, you need to apply it to the tdor thtags like so:
这里有很多不完整的答案。由于您无法将边框应用于tr标签，因此您需要将其应用于td或th标签，如下所示：
td {
border-bottom: 1pt solid black;
}
Doing this will leave a small space between each td, which is likely not desirable if you want the border to appear as though it is the trtag. In order to "fill in the gaps" so to speak, you need to utilize the border-collapseproperty on the tableelement and set its value to collapse, like so:
这样做会在每个 之间留下一个小空间td，如果您希望边框看起来好像它是tr标签，这可能是不可取的。为了“填补空白”，您需要利用元素border-collapse上的属性table并将其值设置为collapse，如下所示：
table {
border-collapse: collapse;
}
回答by Jesse
Use
用
table{border-collapse:collapse}
tr{border-top:thin solid}
Replace "thin solid" with CSS properties.
用 CSS 属性替换“thin solid”。
回答by Jeremey
Display the row as a block.
将行显示为块。
tr {
display: block;
border-bottom: 1px solid #000;
}
and to display alternate colors simply:
并简单地显示替代颜色：
tr.oddrow {
display: block;
border-bottom: 1px solid #F00;
}
回答by Ian Bruce
You can use the box-shadowproperty to fake a border of a trelement. Adjust Y position of box-shadow(below represented as 2px) to adjust thickness.
您可以使用该box-shadow属性来伪造tr元素的边框。调整 Y 位置box-shadow（下图表示为 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);
}
回答by MUFN
I tried adding
我尝试添加
table {
border-collapse: collapse;
}
alongside the
旁边
tr {
bottom-border: 2pt solid #color;
}
and then commented out border-collapse to see what worked. Just having the tr selector with bottom-border property worked for me!
然后注释掉 border-collapse 看看效果如何。只是让带有底部边框属性的 tr 选择器对我有用！
No Border CSS ex.
无边框 CSS 前。
No Border Photo live
无边框照片直播
CSS Border ex.
CSS 边框前。
Table with Border photo live
带边框照片直播的桌子
回答by Howard Cary Morris
Several interesting answers. Since you just want a border bottom (or top) here are two more. Assuming you want a blue border 3px thick. In the style section you could add
几个有趣的答案。由于您只想要边框底部（或顶部），这里还有两个。假设你想要一个 3px 厚的蓝色边框。在样式部分，您可以添加
.blueB {background-color:blue; height:3px} or
hr {background-color:blue; color:blue height:3px}
In the table code either
在表代码中
<tr><td colspan='3' class='blueB></td></tr> or
<tr><td colspan='3'><hr></td></tr>
