Html CSS 使用表格单元格内的文本设置表格单元格背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1198297/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Set Table Cell Background Color Using Text Inside Table Cell
提问by Alconja
Have basically the same problem as this- text has a background color set and is in a table cell. Text background color is only behind the text, and does not fill the entire table cell, which it should.
有与此基本相同的问题- 文本设置了背景颜色并且位于表格单元格中。文本背景颜色仅在文本后面，并不会填充整个表格单元格，它应该填充。
The solution is normally to set a bgcolor on the table cell. Difference is that this occurs in many places throughout this particular website, and changing all the relevant table cells would take a very long time.
解决方法通常是在表格单元格上设置一个 bgcolor。不同之处在于，这发生在整个特定网站的许多地方，并且更改所有相关表格单元格将需要很长时间。
Question is, is there a way to say in CSS, either of:
问题是，有没有办法在 CSS 中说：
- Make the text background colour fill the whole table cell (if the text is in a table cell); or.....
- If a table cell contains a text element which has style x, then make that table cell have a background colour (a kind of reverse inheritance)?
- 使文本背景颜色填充整个表格单元格（如果文本在表格单元格中）；或者.....
- 如果表格单元格包含样式为 x 的文本元素，那么使该表格单元格具有背景颜色（一种反向继承）？
PS: the site was developed for IE6 originally, and IE6 already fills the entire table cell with the text's background color, so initially no issues. FF and IE 7+ work differently though.
PS：该站点最初是为 IE6 开发的，并且 IE6 已经用文本的背景颜色填充了整个表格单元格，所以最初没有问题。FF 和 IE 7+ 的工作方式不同。
回答by Alconja
As David Dorward said, there's no way to do exactlywhat you want cleanly with CSS, however I can think of a few workarounds...
正如 David Dorward 所说，使用 CSS无法完全满足您的要求，但是我可以想到一些解决方法......
Assuming your html is something like this (i.e. the thing with the background color is the only thing in the table cell):
假设您的 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>
You could do this to your CSS:
你可以对你的 CSS 这样做：
td { height: 100%;}
.bg { background-color: #f00; width: 100%; height: 100%; display: block; }
It works in this simple example (at least in firefox 3.5), but could have other side effects depending on what the content of your html looks like.
它适用于这个简单的例子（至少在 firefox 3.5 中），但可能有其他副作用，具体取决于 html 的内容是什么样的。
Edit: Another option if you're ok with hacking it via javascript, is to use jQuery like this:
编辑：如果您可以通过 javascript 破解它，另一种选择是像这样使用 jQuery：
$(function() { $("td:has(span.bg)").addClass("bg"); });
This works on the above example html/css, but would obviously need to be changed to match your css classes, etc.
这适用于上面的示例 html/css，但显然需要更改以匹配您的 css 类等。
回答by Quentin
No.
不。
CSS, currently at least, has no way to style an element based on anything that appears after the start tag for that element in the document. So you cannot style an element based on it's content.
至少目前，CSS 无法根据文档中该元素的开始标记之后出现的任何内容来设置元素的样式。所以你不能根据它的内容来设置元素的样式。
回答by Tony C
Well If you want just an entire cell covered, this doesn't require css, unless you want to use it:
好吧，如果您只想覆盖整个单元格，则不需要 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>
It works in FireFox and IE8 and 7. It covers the entire cell even if the text doesn't.
它适用于 FireFox 和 IE8 和 7。它覆盖整个单元格，即使文本没有。
