[英]CSS Set Table Cell Background Color Using Text Inside Table Cell
与此基本相同的问题 - 文本具有背景颜色集并且在表格单元格中。 文本背景颜色仅在文本后面,并且不会填充整个表格单元格。
解决方案通常是在表格单元格上设置bgcolor。 不同之处在于,这种情况发生在整个特定网站的许多地方,并且更改所有相关的表格单元格需要很长时间。
问题是,有没有办法在CSS中说:
PS:该网站最初是为IE6开发的,IE6已经用文本的背景颜色填充整个表格单元格,所以最初没有问题。 FF和IE 7+的工作方式不同。
正如戴维·多沃德说,没有办法做的正是你想要的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类等。
没有。
CSS目前至少无法根据文档中该元素的开始标记之后出现的任何内容设置元素样式。 因此,您无法根据元素的内容设置元素样式。
好吧如果你想要覆盖整个单元格,这不需要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.它涵盖了整个单元格,即使文本没有。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.