CSS 设置表格单元格背景颜色使用表格单元格内的文本

Question

用背景颜色填充表格单元格有基本相同的问题吗？ - 文本设置了背景颜色并且位于表格单元格中。文本背景颜色仅在文本后面，并没有填充整个表格单元格，它应该是这样。

解决方案通常是在表格单元格上设置 bgcolor。不同之处在于，这种情况发生在整个特定网站的许多地方，并且更改所有相关的表格单元格将花费很长时间。

问题是，有没有办法在 CSS 中说：

1. 使文本背景颜色填充整个表格单元格（如果文本在表格单元格中）；要么…..
2. 如果表格单元格包含具有样式 x 的文本元素，那么让该表格单元格具有背景颜色（一种反向继承）？

PS：该网站最初是为 IE6 开发的，IE6 已经用文本的背景颜色填充了整个表格单元格，所以最初没有问题。 FF 和 IE 7+ 的工作方式不同。

原文由 Lukas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

正如 David Dorward 所说，没有办法用 CSS 完全按照 您的意愿行事，但是我可以想到一些解决方法……

假设您的 html 是这样的（即具有背景颜色的东西是表格单元格中唯一的东西）：

 <table>
    <tr>
        <td>test with longish string<br/> over two lines<td>
        <td><span class="bg" >test</span></td>
    </tr>
    <tr>
        <td>test with longish string<br/> over two lines<td>
        <td>test with longish string<br/> over two lines<td>
    </tr>
</table>

您可以对您的 CSS 执行此操作：

 td { height: 100%;}
.bg { background-color: #f00; width: 100%; height: 100%; display: block; }

它适用于这个简单的示例（至少在 firefox 3.5 中），但可能会产生其他副作用，具体取决于 html 的内容。

---

编辑：如果您可以通过 javascript 破解它，另一种选择是像这样使用 jQuery：

 $(function() { $("td:has(span.bg)").addClass("bg"); });

这适用于上面的示例 html/css，但显然需要更改以匹配您的 css 类等。

原文由 Alconja 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

好吧，如果你只想覆盖整个单元格，这不需要 css，除非你想使用它：

 <table width="100" height="100" border="2">
<tbody>
<tr>
<td bgcolor='red'>This is Red</td>
</tr>
<tr>
<td bgcolor='blue'>This is Blue</td>
</tr>
</tbody>
</table>

它适用于 FireFox 和 IE8 和 7。即使文本没有，它也会覆盖整个单元格。

原文由 Tony C 发布，翻译遵循 CC BY-SA 2.5 许可协议