Highlight a table column + colspan

Question

jsfiddle link: http://jsfiddle.net/KMzjp/

So I am trying to highlight a table column based on a table header th element (there are three th elements so there should be three columns and the middle one highlighted).

It works without colspans. But when I add colspans to tbody (see the second table), it does not work as expected.

See the jsfiddle link to understand my problem better.

Any ideas how to solve this issue?

Answer 1

Changing the <colgroup> to the following (adding span="5") would do.

<colgroup>
    <col class="" span="5"/>
    <col class="highlight" span="5" />
    <col class="" span="5" />
</colgroup>