How to create fixed table header rows that include colspans?

You can have the header row(s) in a separate table to the data rows using the same colgroup settings in both.

The below works fine in IE9, FF14.01 and Chrome 20.0.1132.57.

<table border="1">
    <colgroup>
        <td width="100px">Column 1</td>
        <td width="100px">Column 2</td>
        <td width="100px">Column 3</td>
        <td width="16px" style="background-color: gray;"><td>
    </colgroup>
</table>
<div style="position: absolute; height:75px; overflow-y:scroll; overflow-x:auto">
    <table border="1">
        <colgroup>
            <td width="100px"></td>
            <td width="100px"></td>
            <td width="100px"></td>
        </colgroup>
        <tbody>
            <tr>
                <td>Row 1 - Cell 1</td>
                <td>Row 1 - Cell 2</td>
                <td>Row 1 - Cell 3</td>
            </tr>
            <tr>
                // rest omitted, see DEMO for full table
            </tr>
        </tbody>
    </table>
</div>

​See DEMO

Edit -- August 3rd 2012

The only way I was able to get it to work was with a bit of trickery alright. I separated the header as in the first example. But due to the extremly custom multiple different widths in the header, the most reliable way, keeping everything aligned, was to copy the th rows also into the second table but without text inside. That made them "invisible" but forced the columns in the second table to align as expected.

See DEMO

It feels a bit hackish and I'm sure there is a proper solution but it seem

I have an idea for you. You will split your table into two tables. One of them will acting as the header and the second will acting as the rest of all cells and rows. The trick in the following: Placing two fixed width and height divs vertical adjacent to themselves. the upper one will loads the header table and the n the lower will acts for the table body. in the lower div you will set vertical overflow. By this way you will have simple solution's that supports your header move with data scrolling.

It seems the best way to go about this is two tables. Outer table with headers, and one big row with an inner table inside that. The div should be css'ed overflow: scroll or auto with a set height (via css or javascript). You will have to set specific widths on all the columns. I think the best way to go about that is giving a class for each header, and make sure the corresponding columns in the inner table have the same classes.

<table>
    <tr><th>...</th></tr>
    <tr><td>
            <div><inner table></div>
    </td></tr>
</table>

Check this out for examples: http://www.cssplay.co.uk/menu/tablescroll.html

Very quick and sketchy, but hopefully you get the idea, why not just use position:fixed for the thead. jsfiddle: http://jsfiddle.net/b3S5F/