Keep table head visible

Question

Possible Duplicate:
I need my html table's body to scroll and its head to stay put

I have a basic table:

<div>
    <table>
        <thead><tr><th>col 1</th><th>Col 2</th></tr></thead>
        <tbody><tr><td>sweet</td><td>tooth</td></tr></tbody>
    </table>
</div>

So I have 200 rows in the body section and want to make it so that when I scroll the thead section stays on top while everything else flows underneath it. Is there anyway to do this in CSS?

Following styles:

div {
    max-height:400px;
    overflow:auto;
}

I can't figure out how to do this. I tried to make the scroll part just tbody, but when I do that the max-height portion doesn't take effect for some odd reason. Also if I break it up into 2 tables then the columns won't be the correct widths. I also can't state what the widths are beforehand as the data changes rapidly so it needs to be able to be changeable.

Any ideas? I'm lost.

Something like this. Basically using fixed positioning. http://www.imaputz.com/cssStuff/bigFourVersion.html — Billy Moat, Aug 19 '12 at 19:43
Neither of those work because it is forcing the widths of the individual columns to be static. I need something variable. I will never know the widths. Both the table width and the individual col widths are viable to change. — Aram Papazian, Aug 19 '12 at 19:56

bhamlin · Answer 1 · 2012-08-19T19:58:04.253

edit: Actually, this appears to break the connection between the header and the table, so the header columns don't line up. I'll leave this here though in case someone can get it to work.

How about this. The header is rendered position:absolute, so it won't move. But you have to explicitly position the table down to give it room.

.relative {
    position:relative;   
}
.table {
    margin-top:18px;
    max-height:400px;
    overflow:auto;
}
thead {
    position:absolute;
    top: -18px;
}

<div class="relative">
    <div class="table">
        <table>
            <thead><tr><th>col 1</th><th>Col 2</th></tr></thead>
            <tbody>
                <tr><td>sweet</td><td>tooth</td></tr>
            </tbody>
        </table>
    </div>
</div>

Change 18px to be whatever the height of your thead should be. Working sample: http://jsfiddle.net/EYjd5/1/

This would work, except how about if my thead row has one col that has word-wrap, or covers 3 lines, 4 lines, etc. =/ — Aram Papazian, Aug 19 '12 at 19:58
Here 2 years later, but this doesn't work for columns with variable width : http://jsfiddle.net/EYjd5/33/ ;) — Maxime Lorant, Mar 20 '14 at 16:59

score 0 · Answer 2 · answered Aug 19 '12 at 19:55

0

In case you're a jQuery-lover, you can use the DataTables jQuery plug-in to achieve exactly that.

answered Aug 19 '12 at 19:55

Chris

26,544
5
58
71

I'd love to, but the challenge here is to create a pure CSS solution =) Using javascript would make this a lot easier =P – Aram Papazian Aug 19 '12 at 20:00

Chris · Accepted Answer · 2012-08-19T20:29:43.710

One of the possible methods is to create another table inside the main tbody, limit its height, and make sure you get scrollbars on overflow by using overflow: scroll;. Of course, for the columns to line up, you need to imitate the effect of the table header, I did that by inserting a hidden row identical to the header in the end of the new table (you should hide it using visibility: hidden; opacity: 0; not using display: none; otherwise this won't work). Here's a sample:

HTML:

<table>
    <thead><tr><th>Name of show</th><th>Greatness</th></tr></thead>
    <tbody><table class = "limitedcontent">
        <tr><td>Glee</td><td>100%</td></tr>
        <tr><td>Glee</td><td>100%</td></tr>
        <tr><td>Glee</td><td>100%</td></tr>
        <tr><td>Glee</td><td>100%</td></tr>
        <tr><td>Glee</td><td>100%</td></tr>
        <tr><td>Glee</td><td>100%</td></tr>
        <tr><td>Glee</td><td>100%</td></tr>
        <tr class = "placehold"><th>Name of show</th><th>Greatness</th></tr>
    </table></tbody>
</table>

CSS:

.limitedcontent {
    height: 150px; /*or whatever your limit is*/
    overflow-y: scroll;
    overflow-x: hidden;
    display: inline-block;
}
.placehold {
    visibility: hidden;
    opacity: 0;
    height: 0px;
    overflow: hidden;
}

And a little demo: little link.

I hope that helped in any manner!

I like your idea of creating a hidden row in order to get the proper widths. I think this will work perfectly! Thanks =) — Aram Papazian, Aug 19 '12 at 20:55

Keep table head visible

3 Answers3