CSS Color table cell table using text inside table cell

Question

Basically the same problem as this - the text has a background color and is in the table cell. The background color of the text is only behind the text and does not fill the entire cell of the table, which should be.

It is usually customary to set bgcolor on a table cell. The difference is that this happens in many places on this particular website, and changing all the corresponding table cells takes a lot of time.

The question is, is there a way to say in CSS:

• Make the background color of the text fill the entire table cell (if the text is in the table cell); or.....
• If a table cell contains a text element that has the x style, does this table cell make a background color (a kind of reverse inheritance)?

PS: the site was developed for IE6 initially, and IE6 already fills the entire cell of the table with the color of the text, so initially there are no problems. FF and IE 7+ work differently.

Answer 1

As David Dorward said, there is no way to do exactly what you want with CSS, but I can come up with a few workarounds ...

Assuming your html is something like this (i.e. the thing with the background color is the only thing in the table cell):

<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 can do this for your 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 may have other side effects depending on how your html content looks.

---

Change Another option, if you're fine with hacking it through javascript, is to use jQuery as follows:

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

This works on the above html / css example, but obviously, it will need to be modified according to your css classes, etc.

Answer 2

Not.

Currently, at least CSS does not have the ability to style an element based on everything that appears after the start tag for that element in the document. Thus, you cannot create an element based on its contents.

Answer 3

Well, if you only need the whole cell, this does not require css if you do not want to use it:

 <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 on FireFox and IE8 and 7. It covers the entire cell, even if the text is missing.