JToland JToland - 7 months ago 9
HTML Question

How to give a nested HTML table cell a transparent background?

I'm creating an HTML file containing a table with alternating row colors. One of the columns in this table is a set of cells containing sub-tables. My problem is that I can't get the sub-tables to have the same background color as the row in which they're a member. I've tried having a CSS class with

background-color: transparent;


but that doesn't seem to change anything at all.

It might be easier to understand the problem with a visual. I fuzzed-out the text and circled the sub-tables to highlight them. Basically, I need those white areas within the rows with a gray background to also have gray backgrounds (for their entire table) so you can't really tell it's a separate table.

enter image description here

Also, this has to work in IE. I know, I know, but...that's how it is.

Thanks!

Answer

Use * css selector:

table tr.row1 td * {
    background-color: COLOR1;
}
table tr.row2 td * {
    background-color: COLOR2;
}