Avoid <colgroup> / <col> HTML tags to alter <thead> and <tfoot> rows?

Question

Is there a way to limit/restrain the field of "operation" of styles defined in <colgroup> / <col> HTML tags.

Given the following table:

<table>
    <colgroup>
        <col align="center" />
        <col align="center" style="background-color: lightgrey;" />
        <col align="center" />
    </colgroup>
    <thead>
        <tr>
            <th>Column A</th>
            <th>Column B</th>
            <th>Column C</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1.a</td>
            <td>1.b</td>
            <td>1.c</td>
        </tr>
        <tr>
            <td>2.a</td>
            <td>2.b</td>
            <td>2.c</td>
        </tr>
    </tbody>
</table>

I would like the background-color: lightgrey; not to be applied to the "Column B" cell (Second th in thead).

Answer 1

You can always apply a style to that cell in particular, or style the whole <tr> for your header row.

http://jsfiddle.net/QQ7LJ/

 <tr style="background-color:white;">
        <th>Column A</th>
        <th>Column B</th>
        <th>Column C</th>
 </tr>

in short: no, there is no way to "limit" css, it will match every available target, and styling your <col> will match the entire column. In order to get different styling, you need to overwrite it somehow, the easiest way being to explicitly style the ones that dont match the general style.

Edit, you can also do this in a stylesheet block, by using CSS3 selectors :nth-of-type and scoping your selector to the <tbody> element.

http://jsfiddle.net/QQ7LJ/1/

tbody td:nth-of-type(2) {
 background-color: lightgrey;   
}​

and the changes to your HTML (everything else is the same)

<colgroup>
    <col align="center" />
    <col align="center"/>
    <col align="center" />
</colgroup>