The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Help me to Freeze Header in Grid View, You can change the Design but Header should be visible
Rating  5
Hashan
post Feb 2 2011, 12:02 PM
Post #1





Group: Members
Posts: 3
Joined: 2-February 11
Member No.: 13,769



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
Attached File  Documents.rar ( 4k ) Number of downloads: 242

Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Feb 2 2011, 12:53 PM
Post #2


WDG Member
********

Group: Root Admin
Posts: 7,998
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



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.


--------------------
Darin McGrew
WDG Member since 1998
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 2 2011, 02:53 PM
Post #3


.
********

Group: WDG Moderators
Posts: 5,920
Joined: 10-August 06
Member No.: 7



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


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Hashan
post Feb 2 2011, 10:35 PM
Post #4





Group: Members
Posts: 3
Joined: 2-February 11
Member No.: 13,769



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...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 3 2011, 07:26 AM
Post #5


.
********

Group: WDG Moderators
Posts: 5,920
Joined: 10-August 06
Member No.: 7



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


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 3 2011, 08:57 AM
Post #6


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,195
Joined: 9-August 06
Member No.: 6



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.


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 3 2011, 08:02 PM
Post #7


.
********

Group: WDG Moderators
Posts: 5,920
Joined: 10-August 06
Member No.: 7



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>


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 5 2011, 06:47 PM
Post #8


.
********

Group: WDG Moderators
Posts: 5,920
Joined: 10-August 06
Member No.: 7



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>


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 6 2011, 01:06 PM
Post #9


.
********

Group: WDG Moderators
Posts: 5,920
Joined: 10-August 06
Member No.: 7



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>



--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 23rd July 2014 - 09:09 PM