如何获得<tr>标签上的CSS背景颜色跨越整个行

我已经尝试了一切，我可以在CSS中想到的，以获得跨越整个表格行的背景颜色（<tr>标签）但是我不断在每个单元格周围获得一个白色边框。

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（摘录）：

 <tr class="rowhighlight"><td>A</td><td>B</td><td>C</td></tr> 

它只是不想合作。 感谢您的帮助…

Answer 1

 table{border-collapse:collapse;} 

Answer 2

删除边框应使背景颜色涂料没有任何间隙的细胞。 如果仔细观察这个jsFiddle ，你会发现淡蓝色的颜色在整行上延伸，没有白色的空白。

如果一切都失败了，试试这个：

 table { border-collapse: collapse; } 

Answer 3

我更喜欢使用border-spacing因为它允许更多的灵活性。 例如，你可以做

 table { border-spacing: 0 2px; } 

这只会使垂直边界崩溃，并使水平边界保持机动，这听起来像OP实际上正在寻找的东西。

请注意， border-spacing: 0与border-collapse: collapse 。 如果您想将自己的边框添加到tr ，您将需要使用后者。

Answer 4

 tr.rowhighlight td, tr.rowhighlight th{ background-color:#f0f8ff; } 

Answer 5

Firefox和Chrome是不同的
Chrome会忽略TR的背景色
例如： http : //jsfiddle.net/T4NK3R/9SE4p/

 <tr style="background-color:#F00"> <td style="background-color:#FFF; border-radius:20px"> </tr> 

在FF中，TD得到红色的angular落，而不是Chrome

Answer 6

尝试这个：

  .rowhighlight > td { background: green;} 

Answer 7

你有没有尝试将间距设置为零？

 /*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;} 

Answer 8

这工作对我来说，即使在一个div：

  div.cntrblk tr:hover td { line-height: 150%; background-color: rgb(255,0,0); font-weight: bold; font-size: 150%; border: 0; } 

它select了整个行，​​但我不想做标题，还没有看过。 它也部分修复了不能用hover按比例放大的字体。 很明显，你已经将设置应用于单元格而不是行，但是使用tr：hoverselect所有组件单元格。 开始追踪不一致的字体缩放问题。 甜，CSS会做到这一点。