2

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>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129

3 Answers3

6

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

WickyNilliams
  • 5,218
  • 2
  • 31
  • 43
1
td:first-child
{
    background:red !important;
}
Helen
  • 811
  • 5
  • 15
  • the column can be any, not just the first. this is just a sample. Don't think the xth-child is supported by too many browsers. –  Nov 24 '11 at 13:03
  • In which case I don't think you can do it with just CSS as col and colgroup aren't very well supported - you could use js to add a class to each of the td tags that are in a specific column though? – Helen Nov 24 '11 at 13:17
0

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>
yunzen
  • 32,854
  • 11
  • 73
  • 106
  • 2
    The problem with this solution is that tables are often dynamically generated, and so it becomes a fundamental change of design in the underlying "table-generation-process" (as well as there being a markup overhead) to add classes to each cell. In my opinion, there's a fundamental shortcoming here in the design of CSS prioritisation rules. There should be a syntax available to allow `colgroup` and `col` settings to override those of `tr` and `td` values. – cartbeforehorse Oct 21 '12 at 10:55
  • You could try to copy the relevant classes from col tags to the corresponding td and th tags with jQuery as proved here: http://stackoverflow.com/questions/9623601/how-to-use-class-attribute-in-html-col/9623761#9623761 – yunzen Oct 22 '12 at 07:38
  • 1
    jQuery is just an acronym for: "Workaround for CSS/HTML limitations" ;-) – cartbeforehorse Nov 20 '12 at 17:00