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

Question

我基本上和这个问题Possible to fill a table cell with a bg color?是一样的 - 文本设置了背景颜色并且在表格单元格中。文本背景颜色仅在文本后面，而不是填充整个表格单元格，它应该填充整个表格单元格。

解决方案通常是在表格单元格上设置bgcolor。不同之处在于，在此特定网站的许多地方都会出现这种情况，更改所有相关的表格单元格将需要很长时间。

问题是，CSS是否有以下任何一种方式：

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

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

- Lukas

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

---

谢谢您的建议-我能理解为什么它应该有效，但对于我们特定的设置没有效果（我们在表格单元格中使用锚标签而不是span，不知道这是否有影响）。现在将其保留为重新开发特定应用程序的另一个原因。 - Lukas

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

---

通常的解决方法是在表格单元格上设置背景颜色。不同之处在于，在这个特定的网站中，这种情况发生在许多地方，更改所有相关的表格单元格需要很长时间。 - Matt Kantor

通常情况下，我不会希望将纯粹的展示元素（比如颜色）放在HTML中，尤其是因为其他所有颜色都是由CSS设置的。 - NeilG

通常情况下，我不会希望将纯粹的展示元素，比如颜色，放在HTML中，尤其是因为其他所有颜色都是由CSS设置的。 - undefined

Answer 3

不行。

CSS 目前没有办法根据元素在文档中开始标记后出现的任何内容来设置样式。因此，您无法根据元素的内容来设置样式。

- Quentin