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

[Darin McGrew]

Here's an example:
http://www.htmlhelp.com/test/tbody.html

However, while it works in Firefox, it doesn't work in Chrome, Safari, or Opera.

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

[pandy]

You use several tables already, so why not move the header row out of the scrolling table? Also, I see no need to nest the tables.

[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>

[Christian J]

This one can be used with percentage widths, and scrollbar width doesn't seem to matter (except perhaps in IE7 and earlier). The fixed table uses a dummy scrollbar to get the same width as the scrolling table.

CODE

<style type="text/css" media="screen">
div#container {
width: 50%;
border: 1px solid #000;
}

div#container div, div#container table {width: 100%;}

div#container div {overflow-y: scroll;}

div#head, div#head table {
height: 35px; /* bugfix: apparently Firefox creates no scrollbar on shorter boxes than this */
}

div#body {height: 10em;}

div#container th, div#container td {
border: 1px solid #000;
/* bold or italicized text in only one table creates width mismatch */
font-weight: normal;
font-style: normal;
}

div#container th {
color: #f00;
background: #eee;
}

</style>
<!--[if lt IE 8]>
<style type="text/css" media="screen">
div#container div {
padding-right: 20px;
overflow-x: hidden;
}
</style>
<![endif]-->

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

[Christian J]

Here's an example:
http://www.htmlhelp.com/test/tbody.html

However, while it works in Firefox, it doesn't work in Chrome, Safari, or Opera.

Seems it can be made to work in all of the above if you make THEAD and TBODY "display: block" (and a few more things). MSIE still needs a javascript workaround, though.

CODE

<style type="text/css" media="screen">
table, th, td {border: solid;}

thead {
display: block;
color: #f00;
background: #eee;
height: 35px; /* min height for Firefox dummy scrollbar */
overflow-y: scroll; /* not needed for Firefox */
}

tbody {
display: block;
height: 100px;
overflow-y: scroll;
}

th, td {
width: 10em; /* makes space for scrollbar, not needed for Firefox */
font-weight: normal; /* prevents cell width mismatch */
}
</style>

<table>
<thead>
<tr>
<th>foo</th>
<th>bar</th>
</tr>
</thead>
<tbody>
<tr>
<td>foo</td>
<td>bar</td>
</tr>
</tbody>
</table>