Freeze Column headers in IE 6.0 and IE 7.0 - html

Question

This is the code sample of a simple list display with a scroll button..It is working good. But now i want to freeze first row..that is the header..Can you please help me..
<div id="user">
<table class="user_list" frame="box" bordercolor="#c1a3cf"
border="1" cellspacing="3" cellpadding="3">
<thead>
<tr>
<th style="padding-top:15px;"> Nr. </th>
<th style="padding-top:15px;"> Concession Nr. </th>
<th style="padding-top:15px;"> Action Performed </th>
<th style="padding-top:15px;"> Action by </th>
<th style="padding-top:15px;"> Action on </th>
</tr>
</thead>
<tbody>
<?php $result = get_user_actionlog($seite,$entries);
if($seite == 1) {
$number = 0;
} else {
$number = ($seite-1) * $entries;
}
while($record = odbc_fetch_array($result)) { ?>
<tr>
<td width="25" class="rtodata"><?php $number += 1;
echo $number;?></td>
<td width="150" class="rtodata"><?php echo $record['concession']; ?> </td>
<td width="400" class="rtodata"><?php echo $record['action_performed'];?></td>
<td width="75" class="rtodata"><?php echo $record['action_by'];?></td>
<td width="100" class="rtodata"><?php echo $record['action_on'];?></td>
</tr>
<?php }?>
</tbody>
</table>
</div>
and in my CSS file,
#user {width: 900px;height:800px;overflow:auto;}
EDIT:-
scrollable table with fixed header works perfectly in IE 6.0 nad in Firefox but not in IE 7.0. If any of you champs can update that...

Answer 1

You can do this by adding a class to the <thead> and using position: fixed; You'll need to add some padding to your div to make it display as you wish.
Example for you here.
IE isn't good at supporting anything scrolling tables. Editing a table in this way is rarely a good idea in any case. You can have one table with your TH wrapped in a div, then the rest of your info in another table, with another div with overflow auto
Another example.
It's not perfect as you have a lot on HTML visual attributes, you should get rid of those and use CSS only. But this is the basic functionality, it should work in all browsers.

Answer 2

Surround the table with divs with outer and then innera..check the css
.outer {
position:relative;
padding:4em 0 3em 0;
width:54em;
background:bottom;
margin:0 auto 3em auto;
}
.innera {
overflow:auto;
width:54em;
height:9.6em;
background:#eee;
border:2px gray;
}
.outer thead tr {
position:absolute;
top:2em;
height:1.5em;
left:0;
}
.outer th, .outer td {
width:10em;
text-align:left;
I tested the code and it is working. Tested in IE 6.0,7.0 ++ .The code is from internet:-)