Question

为了获得跨越整个表格行的背景颜色（＆lt; tr＆gt;标签），我已经尝试了我在css中可以想到的所有内容但是我在每个单元格周围都有一个白色边框。

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

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

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

table { border-collapse: collapse; }

Answer 3

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

table {
  border-spacing: 0 2px;
}

这只会折叠垂直边框并使水平边框保持圆滑，这就像OP实际上正在寻找的那样。

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

Answer 4

试试这个：

    .rowhighlight > td { background: green;}

Answer 5

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

Answer 6

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会出现红色角落，而不是

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

它选择了整行，但是我想它不做标题，还没看过那个。它还部分修复了无法通过悬停扩大的字体???显然，您要将设置应用于单元格而不是行，但是使用tr：hover选择所有组件单元格。在追踪不一致的字体缩放问题上。很好，CSS会做到这一点。

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

8 个答案: