Question

与this基本上存在相同的问题 - 文本具有背景颜色集并位于表格单元格中。文本背景颜色仅在文本后面，并且不会填充整个表格单元格。

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

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

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

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

Answer 2

没有

CSS，至少目前无法根据文档中该元素的开始标记之后出现的任何内容设置元素样式。因此，您无法根据元素的内容设置元素样式。

Answer 3

好吧如果你想要覆盖整个单元格，除非你想使用它，否则这不需要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.它涵盖整个单元格，即使文本没有。

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

3 个答案: