Displaying a scrollable table with fixed head?

[Michael Schuerig]

I'm trying to do something seemingly very simple, but it's brought me
close to crushing my head on the keyboard. All I want is a table where
the head row is fixed and the body columns below are scrollable (with
the ordinary scrollbars, no less). Whatever I try, the columns in the
head and the body aren't aligned; the widths are computed independently
which gives a completely ragged look.

Michael

--
Michael Schuerig They tell you that the darkness
mailto:michael@ schuerig.de Is a blessing in disguise
http://www.schuerig.de/michael/ --Janis Ian, From Me To You

[Martin Honnen]

Re: Displaying a scrollable table with fixed head?



Michael Schuerig wrote:[color=blue]
> I'm trying to do something seemingly very simple, but it's brought me
> close to crushing my head on the keyboard. All I want is a table where
> the head row is fixed and the body columns below are scrollable (with
> the ordinary scrollbars, no less). Whatever I try, the columns in the
> head and the body aren't aligned; the widths are computed independently
> which gives a completely ragged look.[/color]

Mozilla supports
tbody.scrollabl e {
height: 200px;
overflow: auto;
}

<table>
<thead>
<tr>
<th>whatever/th>
</tr>
</thead>

<tbody class="scrollab le">
<!-- rows go here -->
</tbody>
</table>

it then shows scrollbars when needed on the tbody.

On Windows neither Opera 8 nor IE 6 support that however, not sure what
Safari on the Mac or Konqueror on Linux do.


--

Martin Honnen

http://JavaScript.FAQTs.com/

[Eric Kenneth Bustad]

Re: Displaying a scrollable table with fixed head?

In article <d6krit$r09$1@n ewsreader3.netc ologne.de>,
Michael Schuerig <michael@schuer ig.de> wrote:[color=blue]
>
>I'm trying to do something seemingly very simple, but it's brought me
>close to crushing my head on the keyboard. All I want is a table where
>the head row is fixed and the body columns below are scrollable (with
>the ordinary scrollbars, no less). Whatever I try, the columns in the
>head and the body aren't aligned; the widths are computed independently
>which gives a completely ragged look.[/color]

Sounds like you are using two separate tables for the header and body.

Use one table, with the header rows enclosed in <thead></thead> and the
body in <tbody></tbody>. Using CSS, apply the styles "overflow:scrol l;"
and "max-height" to the tbody.

May not work in all browsers, but what will?

--
= Eric Bustad, Norwegian bachelor programmer

[Michael Schuerig]

Re: Displaying a scrollable table with fixed head?

Eric Kenneth Bustad wrote:
[color=blue]
> In article <d6krit$r09$1@n ewsreader3.netc ologne.de>,
> Michael Schuerig <michael@schuer ig.de> wrote:[color=green]
>>
>>I'm trying to do something seemingly very simple, but it's brought me
>>close to crushing my head on the keyboard. All I want is a table where
>>the head row is fixed and the body columns below are scrollable (with
>>the ordinary scrollbars, no less). Whatever I try, the columns in the
>>head and the body aren't aligned; the widths are computed
>>independent ly which gives a completely ragged look.[/color]
>
> Sounds like you are using two separate tables for the header and body.
>
> Use one table, with the header rows enclosed in <thead></thead> and
> the
> body in <tbody></tbody>. Using CSS, apply the styles
> "overflow:scrol l;" and "max-height" to the tbody.[/color]

Please have a look at <http://www.schuerig.de/michael/layout/list.html>.
I think I'm already doing what you suggest, but it doesn't work
nonetheless. Well, this might be due to the fixed and absolute
positioning, but that's exactly what I'm trying to get.

Michael

--
Michael Schuerig The more it stays the same,
mailto:michael@ schuerig.de The less it changes!
http://www.schuerig.de/michael/ --Spinal Tap, The Majesty of Rock

[Michael Schuerig]

Re: Displaying a scrollable table with fixed head?

Martin Honnen wrote:
[color=blue]
>
>
> Michael Schuerig wrote:[color=green]
>> I'm trying to do something seemingly very simple, but it's brought me
>> close to crushing my head on the keyboard. All I want is a table
>> where the head row is fixed and the body columns below are scrollable
>> (with the ordinary scrollbars, no less). Whatever I try, the columns
>> in the head and the body aren't aligned; the widths are computed
>> independently which gives a completely ragged look.[/color]
>
> Mozilla supports
> tbody.scrollabl e {
> height: 200px;
> overflow: auto;
> }
>
> <table>
> <thead>
> <tr>
> <th>whatever/th>
> </tr>
> </thead>
>
> <tbody class="scrollab le">
> <!-- rows go here -->
> </tbody>
> </table>
>
> it then shows scrollbars when needed on the tbody.[/color]

If you don't mind have a look at
<http://www.schuerig.de/michael/layout/list.html>. There I'm not
following your suggestion, but I've tried it without success. I hope
it's obvious what kind of layout I'm trying to achieve -- at least if
you're not using some incarnation of MSIE.

Michael

--
Michael Schuerig There is no matrix,
mailto:michael@ schuerig.de only reality.
http://www.schuerig.de/michael/ --Lawrence Fishburn

[Eric Kenneth Bustad]

Re: Displaying a scrollable table with fixed head?

In article <d6l9cj$kad$1@n ewsreader3.netc ologne.de>,
Michael Schuerig <michael@schuer ig.de> wrote:[color=blue]
>Eric Kenneth Bustad wrote:
>[color=green]
>> In article <d6krit$r09$1@n ewsreader3.netc ologne.de>,
>> Michael Schuerig <michael@schuer ig.de> wrote:[color=darkred]
>>>
>>>I'm trying to do something seemingly very simple, but it's brought me
>>>close to crushing my head on the keyboard. All I want is a table where
>>>the head row is fixed and the body columns below are scrollable (with
>>>the ordinary scrollbars, no less). Whatever I try, the columns in the
>>>head and the body aren't aligned; the widths are computed
>>>independentl y which gives a completely ragged look.[/color]
>>
>> Sounds like you are using two separate tables for the header and body.
>>
>> Use one table, with the header rows enclosed in <thead></thead> and
>> the
>> body in <tbody></tbody>. Using CSS, apply the styles
>> "overflow:scrol l;" and "max-height" to the tbody.[/color]
>
>Please have a look at <http://www.schuerig.de/michael/layout/list.html>.
>I think I'm already doing what you suggest, but it doesn't work
>nonetheless. Well, this might be due to the fixed and absolute
>positioning, but that's exactly what I'm trying to get.[/color]

I don't know how it might affect things, but I would not be too
surprised if separately positioning the head and body of a table
might confuse things a bit. Why not just set the position of the
table as a whole?

--
= Eric Bustad, Norwegian bachelor programmer

[Michael Schuerig]

Re: Displaying a scrollable table with fixed head?

Eric Kenneth Bustad wrote:
[color=blue]
> In article <d6l9cj$kad$1@n ewsreader3.netc ologne.de>,
> Michael Schuerig <michael@schuer ig.de> wrote:[/color]
[color=blue][color=green]
>>Please have a look at
>><http://www.schuerig.de/michael/layout/list.html>. I think I'm already
>>doing what you suggest, but it doesn't work nonetheless. Well, this
>>might be due to the fixed and absolute positioning, but that's exactly
>>what I'm trying to get.[/color]
>
> I don't know how it might affect things, but I would not be too
> surprised if separately positioning the head and body of a table
> might confuse things a bit. Why not just set the position of the
> table as a whole?[/color]

Because I can't get the layout I want with that. Now, that doesn't count
for much, I'm more exasperated than experienced with this stuff. I've
tried a whole bunch of permutations of different settings again and I
get all kinds of curious effects, but don't come anywhere close to what
I'd like to have.

If you really think it can be done like you say, please give it a try
and change my code accordingly.

Michael

--
Michael Schuerig Airtight arguments have
mailto:michael@ schuerig.de vacuous conclusions.
http://www.schuerig.de/michael/ --A.O. Rorty, Explaining Emotions

[kchayka]

Re: Displaying a scrollable table with fixed head?

Michael Schuerig wrote:[color=blue]
>[color=green][color=darkred]
>>> All I want is a table
>>> where the head row is fixed and the body columns below are scrollable[/color][/color]
>
> <http://www.schuerig.de/michael/layout/list.html>.[/color]

Absolute (and fixed) positioning removes the element from the document
flow. You have in essence disassociated the thead from the tbody, so
their column widths have become independent of each other.

What you want is to get rid of the table element positioning, and set an
explicit height on tbody with overflow:auto.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Martin Honnen]

Re: Displaying a scrollable table with fixed head?



Michael Schuerig wrote:
[color=blue]
> Martin Honnen wrote:[/color]
[color=blue][color=green]
>>Mozilla supports
>> tbody.scrollabl e {
>> height: 200px;
>> overflow: auto;
>> }
>>
>> <table>
>> <thead>
>> <tr>
>> <th>whatever/th>
>> </tr>
>> </thead>
>>
>> <tbody class="scrollab le">
>> <!-- rows go here -->
>> </tbody>
>> </table>
>>
>>it then shows scrollbars when needed on the tbody.[/color]
>
>
> If you don't mind have a look at
> <http://www.schuerig.de/michael/layout/list.html>. There I'm not
> following your suggestion, but I've tried it without success.[/color]

I am sure you get a scrollable tbody if you set a height and overflow as
suggested and the thead lines up with the tbody in Mozilla.
You have a however choosen to combine that suggestion with some weird
fixed and absolute positioning which I don't think makes sense.


--

Martin Honnen

http://JavaScript.FAQTs.com/

[Michael Schuerig]

Re: Displaying a scrollable table with fixed head?

kchayka wrote:
[color=blue]
> Michael Schuerig wrote:[color=green]
>>[color=darkred]
>>>> All I want is a table
>>>> where the head row is fixed and the body columns below are
>>>> scrollable[/color]
>>
>> <http://www.schuerig.de/michael/layout/list.html>.[/color]
>
> Absolute (and fixed) positioning removes the element from the document
> flow. You have in essence disassociated the thead from the tbody, so
> their column widths have become independent of each other.[/color]

I agree that that is what has happened. I'm not convinced that this
behavior is good, though. I can't see where it would be useful like
that. When I have a table, to my mind, it is reasonable to expect that
its head and body columns have corresponding widths, no matter where
head and body are positioned. Well, the facts are against me :(
[color=blue]
> What you want is to get rid of the table element positioning, and set
> an explicit height on tbody with overflow:auto.[/color]

When you tell me how to do this while anchoring the body of the table to
(a fixed distance from) the bottom edge of the window, then, yes, I
agree.

Michael

--
Michael Schuerig Face reality and stare it down
mailto:michael@ schuerig.de --Jethro Tull, Silver River Turning

http://www.schuerig.de/michael/

[Michael Schuerig]

Re: Displaying a scrollable table with fixed head?

Martin Honnen wrote:
[color=blue]
> Michael Schuerig wrote:[/color]
[color=blue][color=green]
>> If you don't mind have a look at
>> <http://www.schuerig.de/michael/layout/list.html>. There I'm not
>> following your suggestion, but I've tried it without success.[/color]
>
> I am sure you get a scrollable tbody if you set a height and overflow
> as suggested and the thead lines up with the tbody in Mozilla.[/color]

Yes, I do, but I *do not* want to set a height! I want the table to be
anchored some distance from the bottom edge of the window.
[color=blue]
> You have a however choosen to combine that suggestion with some weird
> fixed and absolute positioning which I don't think makes sense.[/color]

Weird? Yes, absolutely. I'd never claim that I've hit upon the bee's
knees. What's currently there is the result of some reading, thinking,
and, most of all, a lot of trial and error.

In my opinion I'm trying to realize a perfectly reasonable layout. I'm
sure you get the idea from the page I've set up. I'm grateful for the
suggestions I've received so far, but AFAICT they lead in a different
direction and don't help in realizing the layout I want. Thus, in
effect it appears that the suggestions are for some different layout.

I'm not married to that specific layout, I'd instantly ditch it for
something that's clearly better. My own imagination is currently
blocked and I can't think of anything better, but pleasy, anyone, go
ahead.

Michael

--
Michael Schuerig You can twist perceptions
mailto:michael@ schuerig.de Reality won't budge
http://www.schuerig.de/michael/ --Rush, Show Don't Tell

[dwight.stegall@gmail.com]

Re: Displaying a scrollable table with fixed head?

This will work better than using a cheezy table.

<style type="text/css">
#container {width:450px;}
#header, #footer {width:450px; text-align:center; background:#f00 ;
color:#fff; font:900 1em arial,sans-serif;}
#content {width:450px; height:200px; text-align:left; background:#fff ;
color:#000; font:1em arial,sans-serif; overflow:auto;} }
</style>

<div id="container" >

<div id="header">Thi s Is A Fixed Header</div>

<div id="content">Th is text will scroll. This text will scroll. This
text will scroll. This text will scroll. This text will scroll. This
text will scroll. This text will scroll. This text will scroll. This
text will scroll. This text will scroll. This text will scroll. This
text will scroll. This text will scroll. This text will scroll. This
text will scroll. This text will scroll. This text will scroll. This
text will scroll. This text will scroll. This text will scroll. This
text will scroll. This text will scroll. This text will scroll. This
text will scroll. This text will scroll. This text will scroll. This
text will scroll. This text will scroll. This text will scroll. This
text will scroll. This text will scroll. This text will scroll. This
text will scroll. This text will scroll. This text will scroll. This
text will scroll. This text will scroll. This text will scroll. This
text will scroll. This text will scroll. This text will scroll. This
text will scroll. This text will scroll. This text will scroll. This
text will scroll. This text will scroll. This text will scroll. This
text will scroll. This text will scroll. This text will scroll. This
text will scroll. This text will scroll. This text will scroll. This
text will scroll. This text will scroll. This text will scroll. This
text will scroll. This text will scroll. This text will scroll. This
text will scroll. This text will scroll. This text will scroll. This
text will scroll. This text will scroll. This text will scroll. This
text will scroll. This text will scroll. This text will scroll. This
text will scroll. This text will scroll. This text will scroll. This
text will scroll. This text will scroll. This text will scroll. This
text will scroll. This text will scroll. This text will scroll. This
text will scroll. This text will scroll. This text will scroll. This
text will scroll. This text will scroll. This text will scroll. This
text will scroll. This text will scroll. This text will scroll. This
text will scroll. This text will scroll. This text will scroll. This
text will scroll. This text will scroll. This text will scroll. This
text will scroll. This text will scroll. This text will scroll. This
text will scroll. This text will scroll. This text will scroll. This
text will scroll. This text will scroll. This text will scroll. This
text will scroll. This text will scroll. This text will scroll. This
text will scroll. This text will scroll. This text will scroll. This
text will scroll. This text will scroll. This text will scroll. This
text will scroll. This text will scroll. This text will scroll. This
text will scroll. This text will scroll. This text will scroll. This
text will scroll. This text will scroll. This text will scroll. This
text will scroll. This text will scroll. </div>

<div id="footer">Thi s Is A Fixed Footer</div>


</div>

[Gus Richter]

Re: Displaying a scrollable table with fixed head?

Michael Schuerig wrote:[color=blue]
> Martin Honnen wrote:
>
>[color=green]
>>Michael Schuerig wrote:[/color]
>
>[color=green][color=darkred]
>>>If you don't mind have a look at
>>><http://www.schuerig.de/michael/layout/list.html>. There I'm not
>>>following your suggestion, but I've tried it without success.[/color]
>>
>>I am sure you get a scrollable tbody if you set a height and overflow
>>as suggested and the thead lines up with the tbody in Mozilla.[/color]
>
>
> Yes, I do, but I *do not* want to set a height! I want the table to be
> anchored some distance from the bottom edge of the window.[/color]

I find that you are using superfluous code such as defining the border
also in the tbody and thead where declaring it only in table suffices.

There is no reason to nest tables - use only one.

To have tbody scrollable, just as Martin said, all you need to do is to
define is the height and overflow:auto; and none of the other stuff. You
must define the scollable height.

Don't try to position thead or tbody - position the table or its wrapper
(which you probably don't need).

Most importantly, match your ID references.
i.e. entitylist_body != entitylist tbody
entitylist_head != entitylist thead

In other words, scrap it and start afresh.

--
Gus

[Michael Schuerig]

Re: Displaying a scrollable table with fixed head?

Gus Richter wrote:
[color=blue]
> Michael Schuerig wrote:[color=green]
>> Martin Honnen wrote:
>>
>>[color=darkred]
>>>Michael Schuerig wrote:[/color]
>>
>>[color=darkred]
>>>>If you don't mind have a look at
>>>><http://www.schuerig.de/michael/layout/list.html>. There I'm not
>>>>following your suggestion, but I've tried it without success.
>>>
>>>I am sure you get a scrollable tbody if you set a height and overflow
>>>as suggested and the thead lines up with the tbody in Mozilla.[/color]
>>
>>
>> Yes, I do, but I *do not* want to set a height! I want the table to
>> be anchored some distance from the bottom edge of the window.[/color]
>
> I find that you are using superfluous code such as defining the border
> also in the tbody and thead where declaring it only in table suffices.[/color]

Some time after posting the URL above I uploaded a (even more) broken
version of the stylesheet, thus you might have seen that. Here is what
the table formatting was intended to be like

#entitylist thead {
position: fixed;
top: 5em;
left: 0;
width: 100%;
border-top: 1px solid #d9d9d9;
}

#entitylist tbody {
position: absolute;
top: 5.6em;
left: 0;
bottom: 0;
width: 100%;
overflow: auto;
border-width: 1px 0;
border-style: solid;
border-color: #d9d9d9;
border-collapse: collapse;
}


Is the following what you suggest doing for the border?

#entitylist table {
border-style: solid;
border-color: #d9d9d9;
border-collapse: collapse;
}

#entitylist thead {
border-top-width: 1px;
}

#entitylist tbody {
border-width: 1px 0;
}

The drawback is that it doesn't work.

[color=blue]
> There is no reason to nest tables - use only one.[/color]

There is only one table.
[color=blue]
> To have tbody scrollable, just as Martin said, all you need to do is
> to define is the height and overflow:auto; and none of the other
> stuff. You must define the scollable height.[/color]

Okay. If I really *must* define the scrollable height, i.e. it's not
enough to set it implicitly by defining the bottom, then I won't be
able to get what I'd like to have: A scrollable table with fixed head,
anchored some distance from the bottom (and possibly left and right)
edge of the window.
[color=blue]
> Don't try to position thead or tbody - position the table or its
> wrapper (which you probably don't need).[/color]

I'm not doing this to annoy you or anyone else, but please have a look
at the layout again:
<http://www.schuerig.de/michael/layout/list.html>
As bad as that is already, with a fixed table height it wouldn't work at
all; see
<http://www.schuerig.de/michael/layout/list.html2>.
At least Firefox displays this as intended (although the horizontal
scrollbar isn't very fetching); Konqueror (Safari?) doesn't display any
text in the table body :-O

Michael

--
Michael Schuerig Most people would rather die than think.
mailto:michael@ schuerig.de In fact, they do.
http://www.schuerig.de/michael/ --Bertrand Russell

[Michael Schuerig]

Re: Displaying a scrollable table with fixed head?

dwight.stegall@ gmail.com wrote:
[color=blue]
> This will work better than using a cheezy table.[/color]

But I *want* a table for tabular data.

Michael

--
Michael Schuerig The more it stays the same,
mailto:michael@ schuerig.de The less it changes!
http://www.schuerig.de/michael/ --Spinal Tap, The Majesty of Rock