Html 如何让 <tr> 标签上的 css 背景颜色跨越整行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5680753/
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
How to get css background color on <tr> tag to span entire row
提问by H. Ferrence
I have tried everything I can think of in css in order to get a background color to span an entire table row (<tr> tag) But I keep getting a white border around each cell.
我已经在 css 中尝试了所有我能想到的方法，以获得跨越整个表格行（<tr> 标签）的背景颜色，但我一直在每个单元格周围都有一个白色边框。
CSS (excerpt):
CSS（摘录）：
/*alternating row*/
table, tr, td, th {margin:0;border:0;padding:0;}
tr.rowhighlight {background-color:#f0f8ff;margin:0;border:0;padding:0;}
HTML (excerpt):
HTML（摘录）：
<tr class="rowhighlight"><td>A</td><td>B</td><td>C</td></tr>
It just does not want to cooperate. Thanks for helping...
它只是不想合作。谢谢你的帮助...
采纳答案by Jaspero
table{border-collapse:collapse;}
回答by BoltClock
Removing the borders shouldmake the background color paint without any gaps between the cells. If you look carefully at this jsFiddle, you should see that the light blue color stretches across the row with no white gaps.
去除边框应该使背景颜色在单元格之间没有任何间隙。如果您仔细查看此 jsFiddle，您应该会看到淡蓝色在行上延伸，没有白色间隙。
If all else fails, try this:
如果一切都失败了，试试这个：
table { border-collapse: collapse; }
回答by dlsso
I prefer to use border-spacingas it allows more flexibility. For instance, you could do
我更喜欢使用，border-spacing因为它具有更大的灵活性。例如，你可以做
table {
border-spacing: 0 2px;
}
Which would only collapse the vertical borders and leave the horizontal ones in tact, which is what it sounds like the OP was actually looking for.
这只会折叠垂直边框并使水平边框保持原状，这听起来像是 OP 真正要寻找的。
Note that border-spacing: 0is not the same as border-collapse: collapse. You will need to use the latter if you want to add your own border to a tras seen here.
请注意，border-spacing: 0这与border-collapse: collapse. 你需要，如果你想自己的边框添加到一个使用后者tr所看到这里。
回答by Atte V??t?inen
Try this:
尝试这个：
.rowhighlight > td { background: green;}
回答by T4NK3R
Firefox and Chrome are different
Chrome ignores the TR's background-color
Example: http://jsfiddle.net/T4NK3R/9SE4p/
Firefox 和 Chrome 是不同的
Chrome 会忽略 TR 的背景颜色
示例：http: //jsfiddle.net/T4NK3R/9SE4p/
<tr style="background-color:#F00">
<td style="background-color:#FFF; border-radius:20px">
</tr>
In FF the TD gets red corners, in Chrome not
在 FF 中，TD 会出现红角，而在 Chrome 中则不会
回答by álvaro González
tr.rowhighlight td, tr.rowhighlight th{
background-color:#f0f8ff;
}
回答by Geert Immerzeel
Have you tried setting the spacing to zero?
您是否尝试将间距设置为零？
/*alternating row*/
table, tr, td, th {margin:0;border:0;padding:0;spacing:0;}
tr.rowhighlight {background-color:#f0f8ff;margin:0;border:0;padding:0;spacing:0;}
回答by webgeek atlbike
This worked for me, even within a div:
这对我有用，即使在一个 div 中：
div.cntrblk tr:hover td {
line-height: 150%;
background-color: rgb(255,0,0);
font-weight: bold;
font-size: 150%;
border: 0;
}
It selected the entire row, but I'd like it to not do the header, haven't looked at that yet. It also partiallyfixed the fonts that wouldn't scale-up with the hover??? Apparently you to have apply settings to the cell not the row, but select all the component cells with the tr:hover. On to tracking down the in-consistent font scaling problem. Sweet that CSS will do this.
它选择了整行，但我希望它不要做标题，还没有看过。它还部分修复了悬停时无法放大的字体？？？显然，您将设置应用于单元格而不是行，而是使用 tr:hover 选择所有组件单元格。继续追踪不一致的字体缩放问题。很高兴 CSS 会做到这一点。
