Fixed table head - scrollable table body [Archive]

View Full Version : Fixed table head - scrollable table body

Jerome

04-01-2003, 11:55 AM

Hmmm,

I have a long table which doesn't fit on the screen without scrolling.

No problem, but when I scroll down the table-head and thus the discription of the table-cells is not visible anymore.

Is it possible to fix the table-head and scroll t5he table-body?

Thanks for every idea,
Jerome

Cris79

04-01-2003, 01:07 PM

Try this :

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>

<BODY>
<table align="center" border="1" width="200" BORDERCOLOR="#0000FF">
<tr><td> text1</td></tr>
<tr><td>
<div style="overflow-y: scroll; width: 200px; height: 100px;">
<table border="1" align="center" width="200" BORDERCOLOR="#FF0000">
<tr><td>
bala bala<br>bala bala<br>bala bala<br>bala bala<br>bala bala<br>bala bala<br>bala bala<br>
bala bala<br>bala bala<br>bala bala<br>bala bala<br>bala bala<br>bala bala<br>bala bala<br>
</td></tr>
</table>
</div>
</td></tr>
</table>
</BODY>
</HTML>

I have use div for overflow I don't know if table can suport overflow. :thumbsup:

cg9com

04-01-2003, 02:23 PM

Originally posted by Cris79
I don't know if table can suport overflow. :thumbsup:
Yes, i believe it does. :)

brothercake

04-01-2003, 02:37 PM

Doesn't answer the question though .... it sounds like what you want is for <tbody> to scroll while <thead> remains static ...?

I tried overflow:scroll on <tbody> .... and it doesn't work, which is strange considering the specs specifically mention one of the uses of <tbody> / <thead> being so that the body can scroll independently. Maybe they thought vendors would implement it ...

You could certainly fake it with a complete scrolling table, and then a set of headers above it; that would work, but semantically it's not good.

Jerome

04-01-2003, 03:23 PM

Exactly Brothercake,

I tried different possibilities, as well as the ones mentioned above which are similar to my efforts, always with the same idea in mind:

I use table only for tabular data.
Tables are split in header, body and footer
According to css specifications a table should work with overflow.

Normally, the discription in the header and signature in the footer of a table are fixed (data doesn't change or just a little according to it's size), however, data which I generate and display in the body can be every size.

When I display "10" in a table-cell without seeing the table-header with discription, do I mean [N/m], [beer] or [days]

By the way your idea works but i am going to look a little more...

Thanks for the effort,
Jerome

khaki

04-01-2003, 03:23 PM

Hi Jerome...

Here is a cross-browser way (Cris79's solution did not function in Netscape) that seems to do what you want.
;) k

<html>
<head>
<title></title>
</head>
<body>
<table border=1>
<tr><td>Fixed table head - scrollable table body</td></tr>
<tr>
<td>
<div style="width: 250px; height: 250px; overflow:auto">
Hmmm,<br>
I have a long table which doesn't fit on the screen without scrolling.<br>
No problem, but when I scroll down the table-head and thus the discription of the table-cells is not visible

anymore.<br>
Is it possible to fix the table-head and scroll t5he table-body?<br>
Thanks for every idea,<br>
Jerome<br>
=================<br>
repeat text for scroll<br>
=================<br>
Hmmm,<br>
I have a long table which doesn't fit on the screen without scrolling.<br>
No problem, but when I scroll down the table-head and thus the discription of the table-cells is not visible

anymore.<br>
Is it possible to fix the table-head and scroll t5he table-body?<br>
Thanks for every idea,<br>
Jerome<br>
</div>
</td>
</tr>
<tr><td>just another row here for the heck of it</td></tr>
</table>
</body>
</html>

Jerome

04-01-2003, 03:42 PM

Thank You,

It's true this is a way to do it.

Brothercake, I found the answer to the thead, tbody and tfoot solution, it's as easy as simple, it works perfect exactly like we think it should act, only not in ..............IE.

Jerome

khaki

04-01-2003, 03:56 PM

Jerome wrote: It's true this is a way to do it.Okay Jerome... if that's not what you are looking to do... please explain better.

The solution I provided sounds like what you wanted...
And it appears to accomplish what you wanted...
But what do you want?

I'll be happy to play around with this some more, but I need to know what exactly you want it to do (and why the solution that I provided does not do that for you).

I'm game...
please explain some more...
;) k

brothercake

04-01-2003, 04:08 PM

Originally posted by khaki
The solution I provided sounds like what you wanted...
And it appears to accomplish what you wanted...
But what do you want?
If I may - your solution works fine, but it's not semantically meaningful - <thead> means "I'm the header rows" while <tbody> means "I'm the body of the data"; the ideal solution would work off the existing semantics so that <thead> is static while <tbody> scrolls.

Jerome - you say you have a solution that works in all except IE. If it doesn't actually break IE I'd say go for it anyway, and wait for your user base to catch up ;) Either way - can I see it :D

khaki

04-01-2003, 05:29 PM

"semantically meaningful"

That's funny.

Okay...
this works in IE5.0 and Netscape7.0
But it fails in Opera6.02
I didn't test it on anything else.

Closer? If not... what exactly are you looking to do? (all semantics aside. lol).
;) k

<html>
<head>
<style type="text/css">
#scrollBody{text-align : left; width : 300px; height : 200px; overflow: auto;}
</style>
</head>
<body>
<table border="1">
<thead>
<tr width="300px">
<th>Fixed table head - scrollable table body</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div id="scrollBody">Hmmm,<br>
I have a long table which doesn't fit on the screen without scrolling.<br>
No problem, but when I scroll down the table-head and thus the discription of the table-cells is not visible
anymore.<br>
Is it possible to fix the table-head and scroll the table-body?<br>
Thanks for every idea,<br>
Jerome<br>
=================<br>
repeat text for scroll<br>
=================<br>
Hmmm,<br>
I have a long table which doesn't fit on the screen without scrolling.<br>
No problem, but when I scroll down the table-head and thus the discription of the table-cells is not visible
anymore.<br>
Is it possible to fix the table-head and scroll the table-body?<br>
Thanks for every idea,<br>
Jerome
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Has a Footer</th>
</tr>
</tfoot>
</table>
</body>
</html>

brothercake

04-01-2003, 07:45 PM

<pedantry type="somewhat">

HTML semantics are about using elements which describe what the element contains. Jerome asked for a scrolling body; and for a table to be, semantically, 'a table with a scrolling body' then the <tbody> element itself should scroll. What you've got is a single cell of 'table data' containing 'another element, which scrolls'. Although it looks the same, and functions the same, it doesn't mean the same thing.

</pedantry>

It would also be difficult to extend such a table - fine for one scrolling cell, but what if you have complex columns of data and you want those to scroll within the head/foot? You'd have to nest another table, and at that point you really have screwed the table's semantics, all pedantry aside.

But please don't take this as criticism - I think what you've made is very good and works perfectly well. But it's not semantically meaningful; if it were possible to make <tbody> scroll, then that would be preferable (for me), even if it doesn't work in IE.

<nb type="validity">

TFOOT comes after THEAD and before TBODY

</nb>

khaki

04-01-2003, 08:10 PM

okay :(

well, I did find something that works only in IE, but I'll have to look for it again.

and quite honestly...
I don't really know much about using <tbody> and <thead>, because I learned just the basic <table><tr><td> way of doing tables, and that's what I use.
I really don't understand the difference and/or why one would be a better method over the other, so...
I guess I'll educate myself on that so that I can be less oblivious to the whole thing.

Thanks for the lesson (primer) though. I'll do some reading and better familiarize myself with it. I'll also look for the IE only version for this.

And by the way...
you didn't need to edit-out the <pedantry type="severe"> part of your post.
I can handle it... I just didn't understand.. that's all.

(and sure... the solution didn't fit the preferred method... but it's works better than a "semantically unworkable" version. ;) lol )

yikes... my second Moderator spanking within a week!...
;) k

brothercake

04-01-2003, 08:43 PM

It's a two-pronged fork really - in the real world, where the most important thing is that it works, then what you've done is perfectly cool. No client or boss would reject that because 'it's not semantically meaningful enough'.

That's where my pedantry defence-mechanism comes in - when I talk about coding semantics at meetings at work, half of them look at me like I'm insane.

But here, in the abstraction of reflection, we can be more idealistic - okay, so here's a solution which works, but how can we make one which is right. No mean feat ...

It's worth learning about semantics; I'm fairly new to this way of coding myself. I came to it through XML (http://www.w3schools.com/xml/default.asp), but XHTML (http://www.w3schools.com/xhtml/default.asp) is also a good place to start .

khaki

04-01-2003, 09:52 PM

hey brothercake...
you just edited-out one of the funniest lines in your post (why do you keep editing yourself like that?)

Anyway... yeah, I understand.
I guess you and Jerome are cut from the same cloth and were looking for the "perfect wave" (note: if you keep waiting for the perfect wave... you'll never get the thrill of the ride! ;) lol).

That's cool. I thought that he needed just "regular" help (and a working solution).
I'm still trying to figure-out this forum.... it's not the "hit-and-run" kind of forum that I am used to. (but that's okay... i'll find my niche eventually).

and your right... my boss has never rejected anything that I have done because it wasn't semantically meaningful enough. But if he starts... I'll know where he got the idea from. Grrr. LOL!
k

Jerome

04-02-2003, 07:28 PM

Sorry for replying rather late....

First off all thanks for Your effort of discussing and coming up with different solutions.

You showed me some work-arounds which are very good, however my target is to re-code my site following strict w3c and more strict jerome rules.

It seems Mozilla implements - tbody scroll - like, to my opinion, a table should act. See also:

http://www.codingforums.com/showthread.php?threadid=7262&highlight=thead

Thanks,
Jerome

liorean

04-02-2003, 08:42 PM

The reason tfoot, thead and tbody was created was just to allow scrolling with fixed head/footer, and printing across multiple pages with header/footer appearing on each page instead of just first/last.

brothercake

04-02-2003, 08:56 PM

Originally posted by Jerome
It seems Mozilla implements - tbody scroll - like, to my opinion, a table should act. See also:

http://www.codingforums.com/showthread.php?threadid=7262&highlight=thead

Thanks,
Jerome
Aha :) That's why I couldn't getting it to work - I was trying "height" and "clip()" to restrict it ... didn't think to use "max-height" :thumbsup:

brothercake

04-02-2003, 08:57 PM

Originally posted by liorean
The reason tfoot, thead and tbody was created was just to allow scrolling with fixed head/footer, and printing across multiple pages with header/footer appearing on each page instead of just first/last.
Exactly - so by implication browsers should implement scrolling in <tbody>, as mozilla does. I'll have try Opera and Safari and see what they're saying ...

<edit>
No, no joy there ... it's just mozilla
</edit>

liorean

04-02-2003, 09:34 PM

Well, someone has to be the forerunner - mozilla has quite the grasp of the general direction the other standards compliant implementations takes, because they are always the first implementation to get it right...

It's their way of fighting IE's proprietary implementations from being the ones implemented in those that come after.

RadarBob

07-07-2003, 03:41 PM

brothercake;
FWIW I totally agree with your "semantically correct" point of view. Given the pace of change in web development that's the only way to go - but certainly not the easiest.

Given the dirth of good documentation and our desperate struggles to get something working (NOW) we don't even know half, or more, of the time that some certain thing is browser specific.

BTW, HTML The Complete Reference 3rd edition doesn't even mention the "overflow" attribute for the <tbody> tag. Oh wait, that's a CSS2 attribute, burried in a long laundry list of other CSS2 attrubites. Uh, but "auto" is not one of the attribute settings - and it's supposed to work in IE 5, 5.5 and NS 6 (the book is copyright 2001).