Sticky headers

Whilst working on a work project, I needed to create a HTML table that would contain possibly hundreds of rows. The table was followed by a set of buttons that were required to remain on screen at all times (for a set resolution).

So I knew I needed to make the table scrollable, which isn’t exactly a hard task.
However, the top row of the table contained the column headers, which also needed to remain on screen at all times.
Achieving this is a very simple task in tools such as Microsoft Excel, but it wasn’t so straight forward for the web.

After playing around with several examples, all with varying degrees of success, I managed to piece it all together into a final version, which works on IE v6, v7 & v8, as well as Firefox v2 & v3 and even Opera!

(Oh, and it’s XHTML and CSS3 compliant too!)

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

<div class="”scrollTableContainer”">
    <table class="”dataTable”" cellspacing="”0″">
        <thead>
            <tr>
                <th>
                    col 1
                </th>
                <th>
                    col 2
                </th>
                <th>
                    col 3
                </th>
                <th>
                    col 4
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    rgeg
                </td>
                <td>
                    test
                </td>
                <td>
                    longer line of text
                </td>
                <td>
                    0
                </td>
            </tr>
            <tr>
                <td>
                    rgeg
                </td>
                <td>
                    test
                </td>
                <td>
                    longer line of text
                </td>
                <td>
                    0
                </td>
            </tr>
            <tr>
                <td>
                    rgeg
                </td>
                <td>
                    test
                </td>
                <td>
                    longer line of text
                </td>
                <td>
                    0
                </td>
            </tr>
            <tr>
                <td>
                    rgeg
                </td>
                <td>
                    test
                </td>
                <td>
                    longer line of text
                </td>
                <td>
                    0
                </td>
            </tr>
            <tr>
                <td>
                    rgeg
                </td>
                <td>
                    test
                </td>
                <td>
                    longer line of text
                </td>
                <td>
                    0
                </td>
            </tr>
        </tbody>
    </table>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

table.dataTable {
    margin: 0;
    padding: 0;
}
 
table.dataTable th {
    margin: 0;
	padding: 4px 3px 3px 4px;
	font-weight: bold;
}
 
table.dataTable td {
    margin: 0;
	border-top: 1px solid #999;	
    padding: 2px 3px 3px 4px
}
 
 
div.scrollTableContainer {
height: 235px;
overflow: auto;
width: 900px;
margin: 15px 0 0 0;
position: relative;
}
 
/* IE Fix */
div.scrollTableContainer table {
width: 882px;
}
 
/*FireFox Fix*/
html>/**/body div.scrollTableContainer table {
/* 18px bigger than above setting.. */
width: 900px;
}
 
/*FireFox Fix*/
html>/**/body div.scrollTableContainer table>tbody {              
overflow: auto;
height: 200px;
overflow-x: hidden;
}
 
div.scrollTableContainer thead tr {
position:relative;
top: expression(offsetParent.scrollTop);
left: 0px;
}
 
div.scrollTableContainer td:last-child {padding-right: 20px;border-right: 1px solid #999;}

Tags: , , ,

This entry was posted on Tuesday, June 16th, 2009 and is filed under Web. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Responses to “Sticky headers”

  • danaravid Says:
    August 5th, 2009 at 11:06 am

    sorry, but the code does not work…

  • Sk93 Says:
    August 5th, 2009 at 11:20 am

    What problems are you having?

    I’ve put together a working version… check here:
    http://www.blog.ianmellor.co.uk/headers.htm

    Steps I did:

    • Created a new file with the following:

      • <html><head><style></style></head><body></body></html>

    • Copy & Pasted the css code above in between the style tags.
    • Copy & Pasted the html code above in between the body tags.
    • Added a red background to the TH style.
    • Added a load more rows to the table.

Leave a Reply