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

Question

与此基本相同的问题- 文本具有背景颜色集并且在表格单元格中.文本背景颜色仅在文本后面,并且不会填充整个表格单元格.

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

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

1. 使文本背景颜色填充整个表格单元格(如果文本位于表格单元格中); 要么.....
2. 如果表格单元格包含具有样式x的文本元素,那么使该表格单元格具有背景颜色(一种反向继承)？

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

Answer 1

正如戴维·多沃德说,没有办法做的正是你想要的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类等.