Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ General Web Design _ Help me to Freeze Header in Grid View

Posted by: Hashan Feb 2 2011, 12:02 PM

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/0f3250fa9592f33b0c7ef1dceefbd773cbe88e0e57015a2aa63f0bf18227c721.html
Or
Attached File  Documents.rar ( 4k ) Number of downloads: 536

Attached Image

Posted by: Darin McGrew Feb 2 2011, 12:53 PM

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.

Posted by: Christian J Feb 2 2011, 02:53 PM

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>

Posted by: Hashan Feb 2 2011, 10:35 PM

QUOTE(Christian J @ Feb 2 2011, 02:53 PM) *

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

Posted by: Christian J Feb 3 2011, 07:26 AM

QUOTE(Hashan @ Feb 3 2011, 04:35 AM) *

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

Posted by: pandy Feb 3 2011, 08:57 AM

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.

Posted by: Christian J Feb 3 2011, 08:02 PM

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>

Posted by: Christian J Feb 5 2011, 06:47 PM

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>

Posted by: Christian J Feb 6 2011, 01:06 PM

QUOTE(Darin McGrew @ Feb 2 2011, 06:53 PM) *

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>


Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)