Question

Hi guys I have a table like that?

<table>

<colgroup>
    <col class="selected">
    <col>
</colgroup>

    <tbody>
      <tr>
          <td>lorem</td>
          <td>lorem</td>
      </tr>
    </tbody>
</table>

and my styles are:

col.selected {
background-color: #f3f3f3; /*for selected column*/
}

table tbody tr:nth-of-type(2n+2){
background-color:#fafafa; /*zebra effect*/
}

all works great however the zerba style owerites col selection style. Any ideas how to avoid that so the selected column will be using style from col rather than nth child ?

Answer 1

As far as I know, you can’t. The best work-around may to be dynamically render some CSS that highlights the correct column. To highlight the second column of a table, for example, you could use:

table tbody tr td:nth-child(2) {
    background-color:red;  
}

Example here:
http://jsfiddle.net/ChrisPebble/tbLrv/