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

Question

与Possible to fill a table cell with a bg color?基本相同的问题- 文本设置了背景颜色并且位于表格单元格中。文本背景颜色仅在文本后面，并没有填满整个表格单元格，但它应该填满。

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

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

1. 使文本背景颜色填充整个表格单元格(如果文本在表格单元格中)；或者……
2. 如果表格单元格包含样式为 x 的文本元素，则让该表格单元格具有背景颜色(一种反向继承)？

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

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 类等。