如何让 <tr> 标签上的 css 背景颜色跨越整行

Posted 2023-02-21

【中文标题】如何让 <tr> 标签上的 css 背景颜色跨越整行

【英文标题】：How to get css background color on <tr> tag to span entire row

【发布时间】：2011-08-06 13:10:48

【问题描述】：

为了让背景颜色跨越整个表格行（

标签），我已经尝试了所有我在 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>

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

【参考方案1】：

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

table 
  border-spacing: 0 2px;

这只会折叠垂直边框并保持水平边框完好无损，这听起来像是 OP 实际在寻找的。​​p>

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

【参考方案2】：

试试这个：

    .rowhighlight > td  background: green;

【参考方案3】：

这对我有用，即使在 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 会做到这一点。

【参考方案4】：

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 有红角，在 Chrome 中没有

【参考方案5】：

tableborder-collapse:collapse;

【讨论】：

表格边框折叠在 Firefox 4 中无法做到

在 FF4 中对我来说很好用。尝试使用重置 CSS。一定有什么压倒一切的。或者让我们在 jsfiddle 中查看您的代码。

add <table id="standings" style="border-collapse:collapse"> 在你网站上的 Firebug 中为我工作。

哇，这太奇怪了。它可以内联工作，但不能通过 css 工作。 css 中的样式是最后定义的集合。好吧，至少它有效。谢谢贾斯佩罗。

【参考方案6】：

您是否尝试将间距设置为零？

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

【讨论】：

你的意思是border-spacing？

Spacing 不是有效的 css 样式，但border-spacing 是。我尝试了边框间距，但没有这样做。

【参考方案7】：

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

【参考方案8】：

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

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

table  border-collapse: collapse; 

【讨论】：

table border-collapse 也没有这样做

在 jsFiddle 中看起来不错——只是在 Firefox 4 中看起来不太对

在 Firefox 4 中对我来说很好。也许你遇到了继承/特异性问题，或者文档类型问题（不太可能）。

我正在使用 FF4 并且 jsFiddle 示例没有任何差距。也许您有其他代码干扰它？我建议下载 Firebug 并查看实际使用的规则。

我确实使用萤火虫。我的 css 是最后一组 css