CODEWITHSUNDEEP
csshtml-table
user429620
user429620

Reputation:

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

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>

Upvotes: 2

Views: 5401

Answers (3)

yunzen
yunzen

Reputation: 33439

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>

Upvotes: 0

WickyNilliams
WickyNilliams

Reputation: 5308

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...

Upvotes: 6

Helen
Helen

Reputation: 811

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

Upvotes: 1

Related Questions