Table Styling - col class should override over td class.. How? - css

Question

See this fiddle:
http://jsfiddle.net/uqJHf/
I have set the first column to show up with a red background.
However, the odd/even styling is overriding it. Even with added !important;
Is there any way I can get this fixed? (without having to add classes to the
tr.row_odd td {
background:#efefef;
}
tr.row_even td {
background:green;
}
.col1 { background:red !important; }
<table>
<col class="col1"></col>
<tr class="row_odd"><td>test</td><td>test</td></tr>
<tr class="row_even"><td>test</td><td>test</td></tr>
</table>

Answer 1

Firstly, lets deal with the markup. I believe that the <col> should be self-closing as it cannot contain any text or child elements and also it should be wrapped in a <colgroup>. You may even need additional <col> tags for each column (so 4 columns means 4 <col>'s).
<table>
<colgroup>
<col class="col1" />
<col />
</colgroup>
<tr class="row_odd"><td>test</td><td>test</td></tr>
<tr class="row_even"><td>test</td><td>test</td></tr>
</table>
Now, having had a little play about with the CSS, it seems it's down to how CSS is applied to columns and <tr>'s. If you remove the styles pertaining to the <tr>'s you will see that the style is applied correctly.
So from this i have concluded that the styles are applied in a layered approach, probably because of the columns being a kind of meta detail of tables. An easy way to imagine this is that the <tr> tags are layered on top of the column, and because you've defined a background-color for the <tr> the column styling does not show through - due to the colour being opaque. If you set the <tr>'s background-color to an RGBA value you will see that the columns colour "shines through".
See the modification of your fiddle, for demonstration: http://jsfiddle.net/uqJHf/4/
Hope that helps, it certainly helped me because i've learnt something new here myself during my investigation.
EDIT: seems that IE9 doesn't agree with what i said, it doesn't seem to apply the RGBA value to the <tr> if the <col> has a background-color set. Works in firefox 7 though...

Answer 2

td:first-child
{
background:red !important;
}

Answer 3

The Class from HTML <col> does not get inherited by <td>. You need to adh´just the HTML. Give class col1 to first <td> in table row
http://jsfiddle.net/uqJHf/6/
--
<table>
<colgroup>
<col class="col1" />
<col />
</colgroup>
<tbody>
<tr class="row_odd">
<td class="col1">test</td>
<td>test</td>
</tr>
<tr class="row_even">
<td class="col1">test</td>
<td>test</td>
</tr>
</tbody>
</table>