Make TBODY scrollable in Webkit browsers

Posted by Andrew on Stack Overflow See other posts from Stack Overflow or by Andrew
Published on 2009-06-19T20:36:16Z Indexed on 2010/12/31 10:53 UTC
Read the original article Hit count: 221

Filed under:
|
|
|
|

I'm aware of this question, but none of the answers work in Safari, Chrome, etc.

The accepted strategy (as demonstrated here) is to set the tbody height and overflow properties like so:

<table>
    <thead>
        <tr><th>This is the header and doesn't scroll</th></tr>
    </thead>
    <tbody style="height:100px; overflow:auto;">
        <tr><td>content that scrolls</td></tr>
        <tr><td>content that scrolls</td></tr>
        <tr><td>content that scrolls</td></tr>
        <tr><td>content that scrolls</td></tr>
        <tr><td>content that scrolls</td></tr>
        <tr><td>content that scrolls</td></tr>
        <tr><td>content that scrolls</td></tr>
    </tbody>
</table>

Unfortunately, this does not work in any webkit browsers. There is a bug report about it that doesn't seem to be a high priority (reported June 05).

So my question is: are there alternate strategies that do actually work? I've tried the two-table approach, but it's impossible to guarantee that the header will line up with the content. Do I just have to wait for Webkit to fix it?

© Stack Overflow or respective owner

Related posts about html

Related posts about table