如何在<tr>标签上获取css背景颜色以跨越整行

Question

我已经尝试了在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

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

table {
  border-spacing: 0 2px;
}

这只会折叠垂直边框并使水平边框保持原状，这听起来像是 OP 实际在寻找的。

请注意，border-spacing: 0这与border-collapse: collapse. 你需要，如果你想自己的边框添加到一个使用后者tr所看到这里。

Answer 3

删除边框应使背景颜色在单元格之间没有任何间隙.如果你仔细看看这个jsFiddle,你应该看到浅蓝色在整个行上延伸,没有白色间隙.

如果一切都失败了,试试这个:

table { border-collapse: collapse; }

Answer 4

尝试这个：

    .rowhighlight > td { background: green;}