Removing the background-color of a <td>

HTML & CSS
1

I have this code. Right now, the background-color of the <td> is red. How can I make it green, i.e. remove the <td>'s background color (red) so that the <tr>'s background-color (green) shows through? “background-color: none” doesn’t work.

Sorry for my bad English.


<style type="text/css">

  tr { background-color: green; }
  td { background-color: red; }

</style>


<table>

<tr>
 <td style="background-color: none;">This background-color should be green.</td>
</tr>


</table>

I also tried “background-color: transparent”, but then it’s white. I want it to be green, i.e. the <tr>'s color.
“background-color: inherit” doesn’t seem to work either.

Can anyone help?

2

Hello

If you mean the whole page is suppossed to be green, than I don’t know, but if you mean the small strip behind the text then just delete this:

{ background-color: red; }

I hope that is what you wanted, if not sorry…

Later
Johnny

3

That’s not quite what I wanted but thanks.

I need to remove the red so that the green shows through without removing the line:
td { background-color: red; }

4

Hello

Look:http://www.metalprovider.com/nwb/example.html

5 
background-color:transparent
6

no, that’s not what I mean Johnny.

let me try to explain.

i thought css worked like this (in this case):

a <tr> is defined with a green background
on top of it a <td> with a red background.

let’s think of it as two layers, like in photoshop: green layer on bottom, red layer on top.

can i just remove the red layer when it’s on top alredy?

–
Jeff: background-color:transparent doesn’t work. It’s somehow a fake transparent I get in IE:
in theory a <td> defined as transparent should show what’s underneath it (the green <tr>). However, it is completely transparent, i.e. the background of the page shows through.

7

Well, I’m not sure a TR is supposed to be able to have a background-image, so I think IE may be doing it correctly.

I’d set the background-color for all the cells in the row to green, and then set the ones you want red to be red.

8

A td doesn’t sit on top of a tr, it’s a cell within the row (tr), although for the purposes of background inheritence it can be considered that way.

Create a separate class for the ones that you wish to be green, alternatively set the table background to green and the cell to red. BTW - have you tried background: inherit; ?

9

or if you are using something like .row for the row (<tr class=“row”>) change it to

.row td {
}

or something…

10

hurricane.uk is correct. A <tr> doesn’t actually have dimension, so it doesn’t display anything itself. When you assign a background color to it, it’s child element <td> inherits that background color. Applying a background color to the <td> changes the color.

11

Ok then. I wasnt sure whether a <tr> had it’s own background or if, when one assigs a background color to a <tr>, the <td> automatically inherit it.

Now I know :slight_smile: Thanks

Gonna work with that in the future.