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

Html CSS使用表格单元格内的文本设置表格单元格背景色,html,css,colors,background,css-tables,Html,Css,Colors,Background,Css Tables,基本上与相同的问题-文本具有背景颜色集,并且位于表格单元格中。文本背景色仅位于文本后面,不会填充整个表格单元格,而应该填充整个表格单元格 解决方案通常是在表格单元格上设置bgcolor。不同的是,在这个特定网站的许多地方都会发生这种情况,更改所有相关的表格单元格需要很长时间 问题是,在CSS中是否有一种方式可以表示: 使文本背景色填充整个表格单元格(如果文本位于表格单元格中);或者 如果表格单元格包含样式为x的文本元素,那么是否使该表格单元格具有背景色(一种反向继承) PS:该网站最初是为IE6

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

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

问题是,在CSS中是否有一种方式可以表示:

  • 使文本背景色填充整个表格单元格(如果文本位于表格单元格中);或者
  • 如果表格单元格包含样式为x的文本元素,那么是否使该表格单元格具有背景色(一种反向继承)
  • PS:该网站最初是为IE6开发的,IE6已经用文本的背景色填充了整个表格单元格,因此最初没有问题。不过FF和IE 7+的工作方式不同。


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

    正如David Dorward所说,使用CSS无法完全做到您想要的,但是我可以想出一些解决方法

    假设您的html是这样的(即,具有背景颜色的内容是表格单元格中唯一的内容):

    它在这个简单的例子中起作用(至少在Firefox3.5中是这样),但根据html内容的不同,可能会产生其他副作用


    编辑:如果您可以通过javascript对其进行黑客攻击,另一个选项是使用jQuery,如下所示:

    $(function() { $("td:has(span.bg)").addClass("bg"); });
    

    这适用于上面的html/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和IE7。即使文本没有覆盖整个单元格。

    谢谢-可以看出为什么它会工作,但我们的特定设置没有乐趣(我们在表格单元格中有锚定标记而不是跨距,不知道这是否重要)。现在就把它作为重新开发特定应用程序的另一个原因。问题是:“解决方案通常是在表格单元格上设置bgcolor。不同的是,这在整个特定网站的许多地方都会发生,更改所有相关表格单元格将需要很长时间。”
    $(function() { $("td:has(span.bg)").addClass("bg"); });
    
    <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>