CSS Fixed headers table in ie

can anyone help me out with creating fixed headers on a table using css only (no js). It needs to support dynamic data as the column sizes are coming 开发者_JAVA百科from a db. Only needs to work in ie7/8. Cheers

If you decide to go with JS (as I'm pretty sure this is hardly possible with sheer CSS), you can try my script. See a demo. It's cross browser and optimized for performance.

Sounds to me like you're trying to create a table where you can scrollthe body part and have the first (header) row not move. This can be done by having one table with the header row, and a second placed inside a <div style="max-height: 400px; overflow: auto;"> - note that this will only work with fixed-width columns, unless you use JavaScript.

If this is not what you're trying to achieve, please disregard this post.

So that is what I thought :

<table>
    <thead>
        <tr>
            <th>Value</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>1</td></tr>
        <tr><td>1</td></tr>
        <tr><td>1</td></tr>
        <tr><td>1</td></tr>
        <tr><td>1</td></tr>
        <tr><td>1</td></tr>
        <tr><td>1</td></tr>
        <tr><td>1</td></tr>
        <tr><td>1</td></tr>
        <tr><td>1</td></tr>
        <tr><td>1</td></tr>
        </tr>
    </tbody>
</table>

tbody {
    max-height:100px;
    overflow:auto;
    position:absolute;
}
tr td:last-child { /* do horizontal scrollbar useless */
    padding-right:1em;
}

EDIT: raaah it works on IE8 but not IE7 (tested with IE9 beta), it seems IE7 applies height rule to <td> elements!