Freezing the top header row in an html table

Question

How can the CSS coding be modified, such that the first row (top header) is frozen?

The code needs to be IE7 Compliant.

table.dataTable {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
    color: #235A81;
    font-family: Arial;
    font-size: 9pt;
}
table.dataTable th {
    margin: 0;
    border-right: 1px solid #999;
    border-top: 1px solid #999;
    font-weight: normal;
    padding: 4px 3px 3px 4px;
    background: #ccc;
    font-weight: bold;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#cdcdcd");
    text-align: left;
    width: 150px;
}

table.dataTable td {
    margin: 0;
    border-right: 1px solid #999;
    border-top: 1px solid #999; 
    padding: 2px 3px 3px 4px
}


div.scrollTableContainer {
    height: 285px;  
    overflow: auto;
    width: 900px;
    margin: 15px 0 0 0;
    position: relative;
}


div.scrollTableContainer table {
    width: 952px;
}

div.scrollTableContainer td:last-child {padding-right: 20px;}

div.scrollTableContainer tr:first-child td { border-top: 0; }

div.scrollTableContainer thead th {border-bottom: 1px solid #999; }

Here's a working fiddle: http://jsfiddle.net/Uamhc/

possible duplicate of [HTML table with fixed headers?](http://stackoverflow.com/questions/673153/html-table-with-fixed-headers) — AndreKR, Jan 09 '13 at 20:06
Possible duplicate of [HTML table with fixed headers?](https://stackoverflow.com/questions/673153/html-table-with-fixed-headers) — Brian Tompsett - 汤莱恩, Feb 15 '18 at 22:15

score 1 · Answer 1 · answered Jan 08 '13 at 22:10

1

Much like what @keeg said you would need to create two tables. However if you have no control over the content of the site you can use

$('.flexme').flexigrid();

Navigate to "Example 1" of this link to see an example of how to use it. :)

answered Jan 08 '13 at 22:10

Black Bird

797
1
10
34

score 0 · Answer 2 · answered Jan 08 '13 at 22:05

0

You'll need to draw two tables, one with the content, one just the header, put the header table in a div and set the div css property: display:fixed

answered Jan 08 '13 at 22:05

keeg

3,990
8
49
97

Freezing the top header row in an html table

2 Answers2