Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Scrollable Table with Fixed Headers

Reply
Thread Tools

Scrollable Table with Fixed Headers

 
 
Mel Smith
Guest
Posts: n/a
 
      06-06-2010
Hi:
Need some guidance on how to construct Fixed headers on top of a
Scrollable table.

I have many hundreds of rows (and 5 text columns) in a table, but I need
to keep my column headers visible while user is scrolling down thru the
rows.

I have scoured my books (even Flanagan's JaveScript Edition 5), but
can't find a hint.

Would someone give me a kick-start please ??

Thank you.

-Mel Smith



--
Mel Smith


 
Reply With Quote
 
 
 
 
rf
Guest
Posts: n/a
 
      06-06-2010

"Mel Smith" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> Hi:
> Need some guidance on how to construct Fixed headers on top of a
> Scrollable table.
>
> I have many hundreds of rows (and 5 text columns) in a table, but I
> need to keep my column headers visible while user is scrolling down thru
> the rows.
>
> I have scoured my books (even Flanagan's JaveScript Edition 5), but
> can't find a hint.


Did you think of using something novel, like google?

A google search for scrollable table with fixed headers gives thousands of
hits. The very first one does exactly what you want.

Note though that most solutions will not work with IE, if if they do then
only with some specific version. For example the first hit above works
nicely in IE6 but fails in IE8.


 
Reply With Quote
 
 
 
 
Neil Gould
Guest
Posts: n/a
 
      06-06-2010
Mel Smith wrote:
> Hi:
> Need some guidance on how to construct Fixed headers on top of a
> Scrollable table.
>
> I have many hundreds of rows (and 5 text columns) in a table, but
> I need to keep my column headers visible while user is scrolling down
> thru the rows.
>
> I have scoured my books (even Flanagan's JaveScript Edition 5),
> but can't find a hint.
>
> Would someone give me a kick-start please ??
>
> Thank you.
>

This is exactly the kind of presentational issue that is easy to do with
framesets and nearly impossible to make work in the majority of browsers by
just using CSS or JavaScript. If you're philosophically opposed to
framesets, or are willing to exclude most users, I hope you have a lot of
hair to lose.

--
best regards,

Niel


 
Reply With Quote
 
Mel Smith
Guest
Posts: n/a
 
      06-06-2010
rf said:

> Did you think of using something novel, like google?


Yes, I spent an hour looking over all the stuff (as you noted) and
couldn't find anything useable for me at my level.

Thanks for the response.

-Mel


 
Reply With Quote
 
Mel Smith
Guest
Posts: n/a
 
      06-06-2010
Neil said:

> This is exactly the kind of presentational issue that is easy to do with
> framesets and nearly impossible to make work in the majority of browsers
> by
> just using CSS or JavaScript. If you're philosophically opposed to
> framesets, or are willing to exclude most users, I hope you have a lot of
> hair to lose.


Neil:

Since I'm also trying to use the headers for 'sortable' columns *and*
having fixed headers, I guess I'm out of luck.

One more thought occurred while mulling over the problem last nite:

Perhaps I can have a <div> at the top of the table that 'looks like' a
header row , but is clickable for sorting the table below (and would
certainly be 'fixed' ).

Thanks for the response.

-Mel



 
Reply With Quote
 
Neil Gould
Guest
Posts: n/a
 
      06-06-2010
Mel Smith wrote:
> Neil said:
>
>> This is exactly the kind of presentational issue that is easy to do
>> with framesets and nearly impossible to make work in the majority of
>> browsers by
>> just using CSS or JavaScript. If you're philosophically opposed to
>> framesets, or are willing to exclude most users, I hope you have a
>> lot of hair to lose.

>
> Neil:
>
> Since I'm also trying to use the headers for 'sortable' columns
> *and* having fixed headers, I guess I'm out of luck.
>

Not really (see below).

> One more thought occurred while mulling over the problem last
> nite:
>
> Perhaps I can have a <div> at the top of the table that 'looks
> like' a header row , but is clickable for sorting the table below
> (and would certainly be 'fixed' ).
>

The "clickable" aspect is a matter of having an action for a button labelled
with the column name, and is independent of the method used to fix the
header. Fixing the header so that it is static in most browsers is another
matter, and, once again, is the kind of thing framesets make simple.

--
best regards,

Neil


 
Reply With Quote
 
Adrienne Boswell
Guest
Posts: n/a
 
      06-06-2010
Gazing into my crystal ball I observed "Mel Smith"
<(E-Mail Removed)> writing in
news:(E-Mail Removed):

> Hi:
> Need some guidance on how to construct Fixed headers on top of a
> Scrollable table.
>
> I have many hundreds of rows (and 5 text columns) in a table, but
> I need
> to keep my column headers visible while user is scrolling down thru
> the rows.
>
> I have scoured my books (even Flanagan's JaveScript Edition 5),
> but
> can't find a hint.
>
> Would someone give me a kick-start please ??
>
> Thank you.
>
> -Mel Smith
>
>
>


I usually do a few things for tables with a lot of data:

1. I use both thead and tfoot, that way when the user gets to the bottom
of the table, they still know where they are.
2. I use "green bar" rows, rows of alternating color. That is simple to
do server side.
3. I use javascript to "highlight" the row the user is on.
4. I use the thead and tfoot to sort the data, or I use a form select
above the table that the user and choose which column on which to sort.
I do that sorting server side, a lot easier and works for the client,
with or without javascript enabled.

<script type="text/javascript">
function mark_row(t) {
t.style.backgroundColor = '#F6ECE2';
}
function unmark_row(t) {
t.style.backgroundColor = 'transparent';
}
</script>
</head>
<body>
<table>
<caption>Caption</caption>
<thead>
<tr>
<th><a href="<?php echo $_SERVER['SCRIPT_NAME']?>?sort=1">Field1</a>
</th><th><a href="<?php echo $_SERVER['SCRIPT_NAME']?>?sort=2">Field2
</a></th><th><a href="<?php echo $_SERVER['SCRIPT_NAME']?>?sort=2">
Field3</a></th>
</tr>
</thead>
<tfoot>
<tr>
<th><a href="<?php echo $_SERVER['SCRIPT_NAME']?>?sort=1">Field1</a>
</th><th><a href="<?php echo $_SERVER['SCRIPT_NAME']?>?sort=2">Field2
</a></th><th><a href="<?php echo $_SERVER['SCRIPT_NAME']?>?sort=2">
Field3</a></th>
</tr>
</tfoot>
<tbody>
<?php
$i = 0;
while ($row = mysql_fetch_array($rs,MYSQL_NUM))
{
$field1 = $row[0];
$field2 = $row[1];
$field3 = $row[2];

if($i%2==0)
{$trclass = "class=".chr(34)."greenrow".chr(34);}
else
{$trclass = "class=".chr(34)."whiterow".chr(34);}

?>
<tr <?php echo $trclass; ?> onmouseover="markrow(this);">
<td><?php echo $field1; ?></td><td><?php echo $field2; ?></td><td><?php
echo $field3; ?></td>

</tr>
<?php
++$i;
}
mysql_free_result($rs);
?>
</tbody>
</table>

--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

 
Reply With Quote
 
Andy Dingley
Guest
Posts: n/a
 
      06-06-2010
On 6 June, 13:09, "Neil Gould" <(E-Mail Removed)> wrote:

> This is exactly the kind of presentational issue that is easy to do with
> framesets


It isn't. You can certainly do something a bit like it with a
frameset, but one of the great advantages of <table> is it's good
behaviour for auto-setting column width. Framesets break this, as they
decouple header and body.
 
Reply With Quote
 
Mel Smith
Guest
Posts: n/a
 
      06-07-2010
Adrienne said:

>
> I usually do a few things for tables with a lot of data:
>
> 1. I use both thead and tfoot, that way when the user gets to the bottom
> of the table, they still know where they are.
> 2. I use "green bar" rows, rows of alternating color. That is simple to
> do server side.
> 3. I use javascript to "highlight" the row the user is on.
> 4. I use the thead and tfoot to sort the data, or I use a form select
> above the table that the user and choose which column on which to sort.
> I do that sorting server side, a lot easier and works for the client,
> with or without javascript enabled.
>
> <script type="text/javascript">
> function mark_row(t) {
> t.style.backgroundColor = '#F6ECE2';
> }
> function unmark_row(t) {
> t.style.backgroundColor = 'transparent';
> }
> </script>
> </head>
> <body>
> <table>
> <caption>Caption</caption>
> <thead>
> <tr>
> <th><a href="<?php echo $_SERVER['SCRIPT_NAME']?>?sort=1">Field1</a>
> </th><th><a href="<?php echo $_SERVER['SCRIPT_NAME']?>?sort=2">Field2
> </a></th><th><a href="<?php echo $_SERVER['SCRIPT_NAME']?>?sort=2">
> Field3</a></th>
> </tr>
> </thead>
> <tfoot>
> <tr>
> <th><a href="<?php echo $_SERVER['SCRIPT_NAME']?>?sort=1">Field1</a>
> </th><th><a href="<?php echo $_SERVER['SCRIPT_NAME']?>?sort=2">Field2
> </a></th><th><a href="<?php echo $_SERVER['SCRIPT_NAME']?>?sort=2">
> Field3</a></th>
> </tr>
> </tfoot>
> <tbody>
> <?php
> $i = 0;
> while ($row = mysql_fetch_array($rs,MYSQL_NUM))
> {
> $field1 = $row[0];
> $field2 = $row[1];
> $field3 = $row[2];
>
> if($i%2==0)
> {$trclass = "class=".chr(34)."greenrow".chr(34);}
> else
> {$trclass = "class=".chr(34)."whiterow".chr(34);}
>
> ?>
> <tr <?php echo $trclass; ?> onmouseover="markrow(this);">
> <td><?php echo $field1; ?></td><td><?php echo $field2; ?></td><td><?php
> echo $field3; ?></td>
>
> </tr>
> <?php
> ++$i;
> }
> mysql_free_result($rs);
> ?>
> </tbody>
> </table>



Adrienne:

I'll look over your page code above carefully tomorrow. (I've been
golfing and drinking, and I've got to rest up for a few hours now ) )

Thank you.

(btw, I use a C-based CGI app on my server (which sits beside me
faithfully and loyally for months at a time)


-Mel Smith



 
Reply With Quote
 
richard
Guest
Posts: n/a
 
      06-07-2010
On Sun, 6 Jun 2010 08:09:36 -0400, Neil Gould wrote:

> Mel Smith wrote:
>> Hi:
>> Need some guidance on how to construct Fixed headers on top of a
>> Scrollable table.
>>
>> I have many hundreds of rows (and 5 text columns) in a table, but
>> I need to keep my column headers visible while user is scrolling down
>> thru the rows.
>>
>> I have scoured my books (even Flanagan's JaveScript Edition 5),
>> but can't find a hint.
>>
>> Would someone give me a kick-start please ??
>>
>> Thank you.
>>

> This is exactly the kind of presentational issue that is easy to do with
> framesets and nearly impossible to make work in the majority of browsers by
> just using CSS or JavaScript. If you're philosophically opposed to
> framesets, or are willing to exclude most users, I hope you have a lot of
> hair to lose.


I have been given the moniker, "stoopid", by numerous people. Yet, even I
would never ever even suggest using framesets for such an undertaking.

I don't even recommend framesets for anything.


--
I learned my lesson well. You can't please everyone, so you got to please
yourself.
- Ricky Nelson from "Garden Party"
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Scrollable Grid With Fixed Header (Please Help Its Urgent) sonali ASP .Net 1 03-08-2010 12:06 PM
Position fixed and scrollable DIV Marcus HTML 0 10-06-2008 10:11 AM
Displaying a Image within a scrollable box/canvas of fixed dimensions crazychrisy54@hotmail.com Javascript 4 03-14-2008 06:03 PM
Scrollable table widget with fixed header Mel Javascript 2 07-10-2004 04:34 PM
Scrollable Datagrid w/ fixed headers AND sorting? Stephen P. ASP .Net Datagrid Control 0 06-24-2004 03:48 PM



Advertisments