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

kpbwa7wx  于 2022-11-19  发布在  其他
关注(0)|答案(3)|浏览(286)

有基本上相同的问题Possible to fill a table cell with a bg color?-文本有一个背景颜色设置,并在一个表格单元格。文本背景颜色只在文本后面,并没有填充整个表格单元格,它应该。
解决方案通常是在表格单元格上设置背景颜色。不同的是,这种情况在整个特定网站的许多地方都会发生,并且更改所有相关的表格单元格将需要很长时间。
问题是,在CSS中有没有办法说:
1.使文本背景颜色填充整个表格单元格(如果文本位于表格单元格中);或者.....
1.如果表格单元格包含具有样式x的文本元素,则使该表格单元格具有背景颜色(一种反向继承)?
PS:这个网站最初是为IE6开发的,IE6已经用文本的背景色填充了整个表格单元格,所以最初没有问题。FF和IE7+的工作方式不同。

htrmnn0y

htrmnn0y1#

正如大卫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; }

它在这个简单的例子中是有效的(至少在firefox3.5中是这样),但是可能会有其他的副作用,这取决于html的内容是什么样子的。

Edit:如果您不介意通过javascript进行破解,另一个选择是使用jQuery,如下所示:

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

这在上面的html/css例子中是有效的,但是显然需要修改以匹配你的css类等等。

r6hnlfcb

r6hnlfcb2#

不,不,不
至少目前CSS还不能根据文档中元素的开始标记之后的任何内容来设计元素的样式,所以你不能根据元素的内容来设计元素的样式。

8ulbf1ek

8ulbf1ek3#

如果你只想覆盖整个单元格,这不需要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中工作。它可以覆盖整个单元格,即使文本没有。

相关问题