Need Header row to show when scolling down page

Question

I don't know what it is called when referencing CSS but in Excel, you can freeze panes (e.g. the header row) so that when you scroll down, you can still see the column headings of the data you are looking at. On my web page, I have a grid-like data. Is there something I can use to keep that data put OR do I just have to make two separate tables and work on getting the alignment of the first and 2nd table to line up?

I'm open to jQuery plugin or plan old js solutions, too.

I've added some code to assist:

<table border="1" class="usertablex" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>City</th>
        </tr>
        </thead>
    <tbody style="height:20px;overflow:scroll;">
        <tr class="subtext">
            <td class="Dwidth175">John Silva</td>
            <td class="Dwidth80" align="center" > New York</td>
        </tr>
        <tr class="subtext">
            <td class="Dwidth175">John Thomas</td>
            <td class="Dwidth80" align="center" > New York</td>
        </tr>
        <tr class="subtext">
            <td class="Dwidth175">Xris</td>
            <td class="Dwidth80" align="center" > New York</td>
        </tr>
        <tr class="subtext">
            <td class="Dwidth175">Bob Denver</td>
            <td class="Dwidth80" align="center" > New York</td>
        </tr>
    </tbody>
</table>

I believe your question has already been answered, but here is a working jsFiddle you – http://jsfiddle.net/QLfjm/ — JDavis, Sep 13 '12 at 23:04
@JDavis - this is very close but the column headings separator doesn't quite line up with the columns below. — HPWD, Sep 14 '12 at 13:34
The coldfusion tag was removed but I added it because of my lack of experience with cfgrid and I wanted to see if a CF techie would/could suggest a CF alternative solution. — HPWD, Sep 14 '12 at 14:38
Oh, I see – Windows pushes the content over for the scrollbar. I'll modify the jsFiddle when I get a chance. I'm thinking maybe put `overflow-y: scroll;` on `thead` or something maybe. I'll have to boot up my VM to mess with it. — JDavis, Sep 14 '12 at 17:27
This link looks promising http://www.farinspace.com/jquery-scrollable-table-plugin/ but I will have to follow up on this later. I'm out of time today to work on this any further. — HPWD, Sep 14 '12 at 20:11
I've left my solution as an answer, but the jQuery plugin you mentioned looks pretty solid. Although, it dosen't look like it will support a flexible layout. I may work on a solution for that. — JDavis, Sep 15 '12 at 00:29

score 2 · Answer 1 · answered Sep 13 '12 at 22:11

2

Put your header in a thead and your data in tbody, define a fixed height for the tbody and add the overflow:scroll property to it. Should be enough.

answered Sep 13 '12 at 22:11

pagid

13,559
11
78
104

I updated my code (see above) with what I believe you were instructing me to do but it isn't working either. – HPWD Sep 14 '12 at 19:24
sorry forgot about to tell you that you're missing display:block see: http://stackoverflow.com/questions/1019938/make-tbody-scrollable-in-webkit-browsers But full version can be seen here: http://anaturb.net/csstips/sheader.htm (incl scrollbars and IE compatibility) – pagid Sep 14 '12 at 22:32

jimp · Answer 2 · 2012-09-14T17:02:35.473

2

Here is a working example called Pure CSS Scrollable Table with Fixed Header. It works by setting the tbody element to display:block, overflow:auto, and adding a specific tbody height.

EDIT: It works in Firefox and Chrome, but IE7,8,9 appear to have broken support for the original method. Since the <tbody style="display:block; overflow:auto"/> trick isn't working in a target browser, I think you're going to need to use two tables with "table-layout:fixed" to keep the column width rigid or find a plugin that will break a single table into two that same way automatically (and maybe just for IE7+).

edited Sep 14 '12 at 17:02

answered Sep 13 '12 at 22:13

jimp

16,999
3
27
36

This looks perfect. Let me try this out and I'll mark this answer accordingly. – HPWD Sep 14 '12 at 13:35
Looked promising but it doesn't appear to work for IE8.0.7601.17514CO – HPWD Sep 14 '12 at 14:40
Hmmm. You're right. It works in FF and Chrome, but IE7,8,9 appear to have broken support for the original method. The jsFiddle comment on your question doesn't work in IE9 either. Since the trick is apparently broken in IE7+, I think you're going to need to use two tables with "table-layout:fixed" to keep the column width rigid or find a plugin that will break a single table into two that same way automatically (maybe just for IE7+). – jimp Sep 14 '12 at 17:00

score 1 · Answer 3 · answered Sep 13 '12 at 22:10

1

Try with the position: fixed; css selector

answered Sep 13 '12 at 22:10

Tarsis Azevedo

1,463
14
21

can you be more specific where you are recommending placing this css code? – HPWD Sep 14 '12 at 16:45

score 1 · Answer 4 · answered Sep 13 '12 at 22:11

1

If you put a div around the headers you can just give it the css

.divname
{
    position:fixed
    top:0;
}

and it will stay on its place at the top of the screen.

answered Sep 13 '12 at 22:11

Bart Kuijer

381
2
12

The column headings wont be at the top of the page. There is a banner/logo, then the nav menu, some instructions, and then the data. – HPWD Sep 14 '12 at 19:25
Use jquery. Look up the position of the headings and the location of your scroll bar. If they are at the same height, add the position:fixed and top:0. Once the location of the scroll bar is above the original location of the header again, remove the position:fixed and top:0. – Bart Kuijer Sep 14 '12 at 20:14

score 0 · Answer 5 · answered Sep 14 '12 at 23:48

I've tested this in IE8 and Chrome on OS X. This solution has some drawbacks though, and may need further tweaking for other browsers, but I think this will be helpful. For example the table must have a fixed width – in order to have a flexible width, I believe you would need to add some extra JS to set the width when the window resizes.

Basically the idea is that you wrap the table in a couple of divs – set position: relative; on the outer one – overflow: auto; with a height on the inner one and then clone thead and position: absolute; top left.

http://jsfiddle.net/ZDeDw/2/

Anyone may fork it and make improvements – just leave a comment about it.

score 0 · Answer 6 · answered Sep 19 '12 at 14:20

0

Thanks to all for the suggestions but I found this which was a bit more suited to what I needed.

http://www.farinspace.com/jquery-scrollable-table-plugin/

answered Sep 19 '12 at 14:20

HPWD

2,232
4
31
61

Need Header row to show when scolling down page

6 Answers6