Scrollable Table with Fixed Headers

M

Mel Smith

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
 
R

rf

Mel Smith said:
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.
 
N

Neil Gould

Mel said:
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.
 
M

Mel Smith

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
 
M

Mel Smith

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
 
N

Neil Gould

Mel said:
Neil said:


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

Adrienne Boswell

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

Andy Dingley

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

Mel Smith

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
 
R

richard

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

dorayme

richard said:
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.

What about for gobbling up people's memory and freezing their
machines by having frames load that are themselves framesets, all
the way down like turtles? Have you no devil in your bones?
 
T

Travis Newbury

No, by everyone. And it's very well earned. I could go into dozens of
examples, but what's the point, you deny them or simply crawl back
under your bridge.

Evan, is your opinions so unimportant that you believe no one will
want to read it a year from now?

If not, then why the **** do you set your post to expire in 6 days? I
would think that you would want to share your knowledge with others in
the future.

If that's not the case then shut the **** up and just go away now.

Sincerely,

TN
 
D

dorayme

Evan Platt said:
No, by everyone.

He didn't say everyone. He said numerous people. And this could
be a very small number of people depending on the sample's
container.
And it's very well earned.
I could go into dozens of
examples, but what's the point, you deny them or simply crawl back
under your bridge.

Has he denied them? My impression was simply that he never
commented on such barbs, and, being a truck driver, simply
checked to see that his iron bar was still under his seat. Enjoy
saying things like this from the safety of your keyboard.

And, btwmy, continue to do photography by ESP, I assume this is a
form of 'capturing ether'.
 
R

richard

He didn't say everyone. He said numerous people. And this could
be a very small number of people depending on the sample's
container.


Has he denied them? My impression was simply that he never
commented on such barbs, and, being a truck driver, simply
checked to see that his iron bar was still under his seat. Enjoy
saying things like this from the safety of your keyboard.

I simply ignore the bullshit.

And, btwmy, continue to do photography by ESP, I assume this is a
form of 'capturing ether'.

The only reason Evan posts, is to harass me. He feels that it is his God
given duty to continously advise others of my "stupidness". As you know, a
bandwagon that was started years ago before Evan came along.

As I have said many times, because of the harassment I have received over
the years, if I say it, it is stupid and wrong. If someone else says the
exact same thing, it's good.

As for Evan's ESP photography website, the ESP comes from his ham radio
license. KG6ESP.
 
M

Mel Smith

Hi:

I've resolved the issue by:

Introducing another 'header' table immediately *above* the main table in
question.

This new table has only a <thead> element with <th> elements matching
the <td> elements of the main table.

It also has a fixed-layout with the same width, etc, etc but has no
<tbody> element

The main table is also a fixed-layout and has a <tfoot> element with no
<thead> element

So, the look of the whole mess is actually very reasonable, and the user
can scroll down thru hundreds of rows and still see (what looks like) the
fixed header of the main table still on the screen.

My next task is to make several of the 1-row columns in this 'top'
table, be 'clickable' so that I can toggle the sort of the *main* table when
these header <th> elements are clicked.

Thanks for the help offered. (and the abuse is actually welcome comic
relief. Keep it up !)

-Mel Smith
 
M

Mel Smith

dorayme said:
It would be nice to post a URL of your discovery so that this can
be helpful to others.


Yes, I'll do that, but to the experts here, it will probably seem
trivial. (my forte/expertise is database work. I've been told that my
presentation skills are childish/amateurish/pukey).

But, I neglected to mention that the single <th> row of the 'header'
table is in a <div> by itself, as is the main table.

I'm working steadily on the main page, and changing its presentation
constantly, but when it stabilizes and I get the courage, I'll post the URL.

Thank you for responding

-Mel
 
D

dorayme

"Mel Smith said:
dorayme said:



Yes, I'll do that, but to the experts here, it will probably seem
trivial. ....
I'm working steadily on the main page, and changing its presentation
constantly, but when it stabilizes and I get the courage, I'll post the URL.

Fair enough.

I guess you looked at

<http://www.imaputz.com/cssStuff/bigFourVersion.html>

which seems OK?

The author even gives a link to another version that even tries
to cater for IE5 (fancy bothering!)
 
R

rf

Mel Smith said:
dorayme said:



Yes, I'll do that, but to the experts here, it will probably seem
trivial. (my forte/expertise is database work. I've been told that my
presentation skills are childish/amateurish/pukey).

But, I neglected to mention that the single <th> row of the 'header'
table is in a <div> by itself, as is the main table.

In a div? A div that/s inside the table?

as in
<table>
<div>
<td>
?

That's invalid html.
 
M

Mel Smith

rf said:
In a div? A div that/s inside the table?

as in
<table>
<div>
<td>
?

That's invalid html.

No, I 'misspoke'. I intended to say that the top 'header' fixed-layout
table is in its own div, and the main table is also within its <div>.

The borders are 'collapsed' so that the Header Table (with just the one
<thead><tr>row situated just a couple of pixels above the first row of the
main table.

Here is the css for this table-combo:

Above this (inter alia) is a container <div> with position: relative;

Also, I had to hard code the widths because (I guess) 'fixed-layout' for
a table *requires* absolute widths

div#headerrow {
position: absolute;
top: 195px;
width: 820px;
height: 50px;
left: 49%; /* I require this but don't know why ?? */
padding: 2px;
margin: 0 0 0 -415px;
overflow: auto;
}
div#tableselect {
position: absolute;
top: 250px;
width: 820px;
height: 230px;
left: 50%; /* as opposed to this */
padding: 2px;
margin: 0 0 0 -415px;
overflow: auto;
}


-Mel Smith
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,769
Messages
2,569,576
Members
45,054
Latest member
LucyCarper

Latest Threads

Top