CODEWITHSUNDEEP
htmlcsscss-tables
user1959234
user1959234

Reputation: 79

Freezing the top header row in an html table

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/

Upvotes: 0

Views: 1939

Answers (2)

Black Bird
Black Bird

Reputation: 797

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. :)

Upvotes: 1

keeg
keeg

Reputation: 3978

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

Upvotes: 0

Related Questions