Help me to Freeze Header in Grid View, You can change the Design but Header should be visible Options Rating

[Hashan]

You can change the Design but Header should be visible. In my design when am going to enter more rows header not visible so its difficult to identify which column that am entering data while enter large amount of data...
Please help me to overcome this Problem asap.......

Download my Source code :
http://www.adrive.com/public/0f3250fa9592f...f18227c721.html
Or
 Documents.rar ( 4k ) Number of downloads: 536

[Christian J]

Here's another version. This one worked in all browsers I tested (even MSIE 5.5), and can be used in a fluid layout. I know 3 disadvantages:

1) The layout assumes that the scrollbar width is less than 20px. Windows users can change this in the OS preferences, and I don't know what widths other OSs use. You can provide much more space for the scrollbar just in case, but instead risk an ugly gap between the tables and scrollbar.

2) The HTML uses two separate tables, which is a bit ugly. I'd probably start with a single table and make the HTML changes below with javascript.

3) The tables require explicit widths (so that you can make space for the scrollbar). Percent can't be used.

CODE

<style type="text/css" media="screen">
div#container {
position: relative;
width: 220px; /* extra 20px used to account for the scrollbar of div#scroll */
border: 1px solid #000;
}

div#scroll {
overflow: auto;
height: 200px;
}

table#head {position: absolute; top: 0; left: 0;}
table#body {margin-top: 1.6em;} /* height of table#head */

div#container table {
width: 200px; /* 20px less than div#container */
color: #000;
background: #fff;
}

div#container th, div#container td {
font-weight: normal; /* prevents TH width rounding(?) error in some browsers */
border: 1px solid #000;
}
</style>

<div id="container">
    <table id="head">
    <tr>
        <th>foo</th>
        <th>bar</th>
    </tr>
    </table>
    <div id="scroll">
        <table id="body">
        <tr>
            <td>foo</td>
            <td>bar</td>
        </tr>
        </table>
    </div>
</div>