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]

Instead of making the table body scrollable you might make the table head fixed. This works in all my new browsers, including IE8. But since fixed positioning offset is always done relative to the viewport it doesn't work well with fluid page layouts, unless the table is the first element at the top/left:

CODE

<style type="text/css" media="screen">
table {
position: absolute;
top: 1.5em;
left: 1em;
}

#fixed {
position: fixed;
top: 0.2em;
left: 1em;
}

th, td {
width: 100px; /* percent doesnt seem to work */
padding: 10px; /* explicit padding needed for equal TH & TD width */
border: 1px solid #000;
}

th {background: blue;}
td {background: pink;}

td {height: 1000px;}
</style>

<table>
<tr id="fixed">
<th>foo</th>
<th>bar</th>
</tr>
<tr>
<td>foo</td>
<td>bar</td>
</tr>
</table>

This post has been edited by Christian J: Feb 2 2011, 04:29 PM

[Hashan]

Instead of making the table body scrollable you might make the table head fixed. This works in all my new browsers, including IE8. But since fixed positioning offset is always done relative to the viewport it doesn't work well with fluid page layouts, unless the table is the first element at the top/left:

CODE

<style type="text/css" media="screen">
table {
position: absolute;
top: 1.5em;
left: 1em;
}

#fixed {
position: fixed;
top: 0.2em;
left: 1em;
}

th, td {
width: 100px; /* percent doesnt seem to work */
padding: 10px; /* explicit padding needed for equal TH & TD width */
border: 1px solid #000;
}

th {background: blue;}
td {background: pink;}

td {height: 1000px;}
</style>

<table>
<tr id="fixed">
<th>foo</th>
<th>bar</th>
</tr>
<tr>
<td>foo</td>
<td>bar</td>
</tr>
</table>

Thank you very much for your Consideration..
IF you can please help me to apply this to my Page because i'm facing a problem when trying to apply this to my page....This is very urgent for my College Project...

[Christian J]

IF you can please help me to apply this to my Page because i'm facing a problem when trying to apply this to my page....This is very urgent for my College Project...

Sorry, no time for that. Your source code contains lots of errors that you should fix. Use the "Validator" link at the top of this page. I also suggest that you use an ordinary, simple table (currently there lots of unnecessary nested ones).