Why does background-color:none not override a specified background color?

The value needs to be a valid color, and none is not a valid color. Instead you can use transparent (similar to rgba(0,0,0,0) but more widely supported). If that's no good you can always go with white or use a more specific rule for the red background instead.

For what it's worth: you could replace background-color:none with background: none and it will work.

None isn't a valid color, instead use transparent.

jsFiddle demo

td.transparent {
    background-color: transparent;
}

Alternatively, you could also use the following:

The reason this works is because it is stating there should be no background in general. It is not referring to a specific color as in the first example.

td.transparent {
    background: none;
}

jsFiddle using this method.

---

As a side note, usage of CSS3 colors (rgba) is not 100% supported. Reference here: http://caniuse.com/css3-colors

---

In addition, I would like to say that all of this could be avoided if you didn't set an inital background-color in the first place. There would then be no reason to overwrite the original style if this were the case.