By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
445,857 Members | 1,816 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 445,857 IT Pros & Developers. It's quick & easy.

Displaying a scrollable table with fixed head?

P: n/a

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:mi*****@schuerig.de Is a blessing in disguise
http://www.schuerig.de/michael/ --Janis Ian, From Me To You

Jul 24 '05 #1
Share this Question
Share on Google+
25 Replies


P: n/a


Michael Schuerig wrote:
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.


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

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

<tbody class="scrollable">
<!-- 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/
Jul 24 '05 #2

P: n/a
In article <d6**********@newsreader3.netcologne.de>,
Michael Schuerig <mi*****@schuerig.de> wrote:

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.


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:scroll;"
and "max-height" to the tbody.

May not work in all browsers, but what will?

--
= Eric Bustad, Norwegian bachelor programmer
Jul 24 '05 #3

P: n/a
Eric Kenneth Bustad wrote:
In article <d6**********@newsreader3.netcologne.de>,
Michael Schuerig <mi*****@schuerig.de> wrote:

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.


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:scroll;" and "max-height" to the tbody.


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:mi*****@schuerig.de The less it changes!
http://www.schuerig.de/michael/ --Spinal Tap, The Majesty of Rock

Jul 24 '05 #4

P: n/a
Martin Honnen wrote:


Michael Schuerig wrote:
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.


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

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

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

it then shows scrollbars when needed on the tbody.


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:mi*****@schuerig.de only reality.
http://www.schuerig.de/michael/ --Lawrence Fishburn

Jul 24 '05 #5

P: n/a
In article <d6**********@newsreader3.netcologne.de>,
Michael Schuerig <mi*****@schuerig.de> wrote:
Eric Kenneth Bustad wrote:
In article <d6**********@newsreader3.netcologne.de>,
Michael Schuerig <mi*****@schuerig.de> wrote:

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.


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:scroll;" and "max-height" to the tbody.


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.


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
Jul 24 '05 #6

P: n/a
Eric Kenneth Bustad wrote:
In article <d6**********@newsreader3.netcologne.de>,
Michael Schuerig <mi*****@schuerig.de> wrote:

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.


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?


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:mi*****@schuerig.de vacuous conclusions.
http://www.schuerig.de/michael/ --A.O. Rorty, Explaining Emotions

Jul 24 '05 #7

P: n/a
Michael Schuerig wrote:
All I want is a table
where the head row is fixed and the body columns below are scrollable


<http://www.schuerig.de/michael/layout/list.html>.


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.
Jul 24 '05 #8

P: n/a


Michael Schuerig wrote:
Martin Honnen wrote:

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

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

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

it then shows scrollbars when needed on the tbody.

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.
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/
Jul 24 '05 #9

P: n/a
kchayka wrote:
Michael Schuerig wrote:
All I want is a table
where the head row is fixed and the body columns below are
scrollable
<http://www.schuerig.de/michael/layout/list.html>.


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.


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 :(
What you want is to get rid of the table element positioning, and set
an explicit height on tbody with overflow:auto.


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:mi*****@schuerig.de --Jethro Tull, Silver River Turning
http://www.schuerig.de/michael/

Jul 24 '05 #10

P: n/a
Martin Honnen wrote:
Michael Schuerig wrote:
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.


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.
You have a however choosen to combine that suggestion with some weird
fixed and absolute positioning which I don't think makes sense.


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:mi*****@schuerig.de Reality won't budge
http://www.schuerig.de/michael/ --Rush, Show Don't Tell

Jul 24 '05 #11

P: n/a
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">This Is A Fixed Header</div>

<div id="content">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. This text will scroll. </div>

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

Jul 24 '05 #12

P: n/a
Michael Schuerig wrote:
Martin Honnen wrote:

Michael Schuerig wrote:


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.

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.


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
Jul 24 '05 #13

P: n/a
Gus Richter wrote:
Michael Schuerig wrote:
Martin Honnen wrote:

Michael Schuerig wrote:
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.

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.


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.


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.

There is no reason to nest tables - use only one.
There is only one table.
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.
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.
Don't try to position thead or tbody - position the table or its
wrapper (which you probably don't need).


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:mi*****@schuerig.de In fact, they do.
http://www.schuerig.de/michael/ --Bertrand Russell

Jul 24 '05 #14

P: n/a
dw************@gmail.com wrote:
This will work better than using a cheezy table.


But I *want* a table for tabular data.

Michael

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

Jul 24 '05 #15

P: n/a
Michael Schuerig wrote:

<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


It's highly unlikely that you'll get a cross-browser scrolling tbody, at
least not for a few years yet.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Jul 24 '05 #16

P: n/a
Michael Schuerig wrote:
Some time after posting the URL above I uploaded a (even more) broken
version of the stylesheet, thus you might have seen that.
[Re: superfluous border declarations]

There is only one table.
You replaced previous versions instead of adding a new version, so I
can't check if it was my bad vision or your error.
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.
How else is it going to know the size of the scrollable window for tbody
without declaring the height?
RE: anchoring from the bottom:
If you want bottom, use it and not top. If your latest is
http://www.schuerig.de/michael/layout/list2.html
then your style2.css rules for table should be changes to provide what
you probably want, like so:
Remove: top: 5em; left: 0;
Replace with: bottom:0;
Your "mainbody" is offset from the bottom by 20px so positioning the
table with bottom:0; will abut the bottom of the table with the top of
your status section. Also, left:0; is superfluous since it is the default.
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>
For the above's style.css no scrollable height is declared for tbody.
Indeed no height for anything at all.
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>.
For: http://www.schuerig.de/michael/layout/list2.html !!!
style2.css has height declared for tbody and it works.
At least Firefox displays this as intended (although the horizontal
scrollbar isn't very fetching);
The vertical scrollbar is inside the table itself, so part of the real
estate for the last cells in tbody is used. If the content in the last
cell extends the full width, the last portion could/would be hidden by
the vertical scrollbar, so a horizontal scrollbar is there to be able to
scroll horizontally in order to look behind the vertical scrollbar. Not
the best - it could have been made to appear only if the text in any of
the last cells is wide enough, but there it is.
Konqueror (Safari?) doesn't display any
text in the table body :-O


Don't know, but I do know that Opera and IE do not support overflow. You
may wish to consider your whole approach if you intend to support them all.

--
Gus
Jul 24 '05 #17

P: n/a
Gus Richter wrote:
Michael Schuerig wrote:
Some time after posting the URL above I uploaded a (even more) broken
version of the stylesheet, thus you might have seen that.
[Re: superfluous border declarations]

There is only one table.
You replaced previous versions instead of adding a new version, so I
can't check if it was my bad vision or your error.


Most likely it was my error. I experimented with with some of the files
in my local staging area and they got uploaded when I didn't think of
it.
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.


How else is it going to know the size of the scrollable window for
tbody without declaring the height?


If top as well as bottom are defined the height simply is given by the
height of the enclosing container minus those two distances. The same
goes for all enclosing containers up to the window. When I started out,
I thought this was so obvious that it got me by surprise when it didn't
work.
For: http://www.schuerig.de/michael/layout/list2.html !!!
style2.css has height declared for tbody and it works.
Yes, I know and I knew it before I even asked. The thing is -- that's
not what I want. You can't always get what you want, yes I know that,
too.
Konqueror (Safari?) doesn't display any
text in the table body :-O


Don't know, but I do know that Opera and IE do not support overflow.
You may wish to consider your whole approach if you intend to support
them all.


As I wrote before:
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 They tell you that the darkness
mailto:mi*****@schuerig.de Is a blessing in disguise
http://www.schuerig.de/michael/ --Janis Ian, From Me To You

Jul 24 '05 #18

P: n/a
Michael Schuerig wrote:
If top as well as bottom are defined the height simply is given by the
height of the enclosing container minus those two distances. The same
goes for all enclosing containers up to the window. When I started out,
I thought this was so obvious that it got me by surprise when it didn't
work.
Well, in this instance it is the scrollable window size of tbody which
is a part of body, from which it takes its width. In my opinion it is
unreasonable to expect to have a different width from table, for thead,
tbody and/or tfoot.
HTML 4.01 does not permit the width attribute for tbody and CSS 2.1
states that the width property applies to "all elements but non-replaced
inline elements, table rows, and row groups", which I believe
incorporates tbody.
The thing is -- that's
not what I want.
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.


You either go with bleeding edge for fancy stuff and wait for other
browsers to catch up or fall back to conventional display and methods.

BTW, do you realize that your css tool throws in an orphan ( } ) closing
curly brace at the end of your stylesheets?

--
Gus
Jul 24 '05 #19

P: n/a
Gus Richter wrote:
Michael Schuerig wrote:
If top as well as bottom are defined the height simply is given by
the height of the enclosing container minus those two distances. The
same goes for all enclosing containers up to the window. When I
started out, I thought this was so obvious that it got me by surprise
when it didn't work.
Well, in this instance it is the scrollable window size of tbody which
is a part of body, from which it takes its width. In my opinion it is
unreasonable to expect to have a different width from table, for
thead, tbody and/or tfoot.


I'm not sure I can follow you here. I'm mostly concerned with the table
(actually tbody) height. Regarding the width, yes, I've set it on thead
and tbody. That was not derived in any way from a CSS spec, but by
trial, error, and seeing what works in Firefox and Konqueror.

I'd like to point out that with both of these browsers, I get the tbody
(but not thead) exactly the way I want it: anchored at fixed distances
from the top and bottom of the window, flush left and right. And
additionally, the column widths look good, i.e., the columns are as
wide as dictated by their content, not forcibly stretched to the entire
table width.

I may be violating all kinds of things in the specs. If this is the
case, IMNSHO, the specs (and browsers) need fixing. The resulting
layout I'm trying to get *should* be allowed and easy. But as things
stand, the layout does not work due to the column width inconsistencies
-- thus I'm not tempted to violate the specs.
You either go with bleeding edge for fancy stuff and wait for other
browsers to catch up or fall back to conventional display and methods.
I agree wholeheartedly that it is bleeding edge. Fancy? No.
BTW, do you realize that your css tool throws in an orphan ( } )
closing curly brace at the end of your stylesheets?


Actually, no, I don't realize this, although my "css tool" -- myself
armed with an editor -- is pretty fallible. Right now I can find no
surplus "}", but I may well have put in one or another in the past.

Michael

--
Michael Schuerig This is not a false alarm
mailto:mi*****@schuerig.de This is not a test
http://www.schuerig.de/michael/ --Rush, Red Tide

Jul 24 '05 #20

P: n/a
Michael Schuerig wrote:
Gus Richter wrote:
Michael Schuerig wrote:
If top as well as bottom are defined the height simply is given by
the height of the enclosing container minus those two distances. The
same goes for all enclosing containers up to the window. When I
started out, I thought this was so obvious that it got me by surprise
when it didn't work.
Well, in this instance it is the scrollable window size of tbody which
is a part of body, from which it takes its width. In my opinion it is
unreasonable to expect to have a different width from table, for
thead, tbody and/or tfoot.


I'm not sure I can follow you here. I'm mostly concerned with the table
(actually tbody) height. Regarding the width, yes, I've set it on thead
and tbody. That was not derived in any way from a CSS spec, but by
trial, error, and seeing what works in Firefox and Konqueror.


Sorry, I jumped ahead of my thoughts. What I was thinking was that by
using coordinates (top, left, bottom, right - which you say does not
work and which I believe is not permitted) you are defining the height
_as well as_ the width (if bottom would work, so would right). You can
define the width of td and the table, but you cannot define the width of
tr, thead, tbody or tfoot. By this I was trying to reason as to why
coordinates do not work for tbody and that you must use the height
property for tbody to specify its scrollable height.
I'd like to point out that with both of these browsers, I get the tbody
(but not thead) exactly the way I want it: anchored at fixed distances
from the top and bottom of the window, flush left and right. And
additionally, the column widths look good, i.e., the columns are as
wide as dictated by their content, not forcibly stretched to the entire
table width.
Your problem was with tbody, which is ok now.
Now your undefined problem is with thead?
I may be violating all kinds of things in the specs. If this is the
case, IMNSHO, the specs (and browsers) need fixing. The resulting
layout I'm trying to get *should* be allowed and easy. But as things
stand, the layout does not work due to the column width inconsistencies
-- thus I'm not tempted to violate the specs.


Now you say you have a problem with column width inconsistencies?
Have you tried specifying th and td widths?

--
Gus
Jul 24 '05 #21

P: n/a
Gus Richter wrote:
Michael Schuerig wrote:

I'd like to point out that with both of these browsers, I get the
tbody (but not thead) exactly the way I want it: anchored at fixed
distances from the top and bottom of the window, flush left and
right. And additionally, the column widths look good, i.e., the
columns are as wide as dictated by their content, not forcibly
stretched to the entire table width.


Your problem was with tbody, which is ok now.
Now your undefined problem is with thead?


You can allocate the problem where you want. I get either a table where
the tbody is exactly as I want it, but its colums are not aligned with
the columns in the thead. Or I can get a table where thead and tbody
columns are aligned perfectly, but the tbody is not how I want it.
I may be violating all kinds of things in the specs. If this is the
case, IMNSHO, the specs (and browsers) need fixing. The resulting
layout I'm trying to get *should* be allowed and easy. But as things
stand, the layout does not work due to the column width
inconsistencies -- thus I'm not tempted to violate the specs.


Now you say you have a problem with column width inconsistencies?
Have you tried specifying th and td widths?


Yes, sort of. I can't manually fix the widths beforehand as the layout
is intended to be used in generated pages where I may not even know how
many columns there are, much less how wide they ought to be. The
browsers are much better at determining an appropriate width, or
whether to show scroll bars, than I am.

I've tried to compute the common column width in a JavaScript as the max
of the corresponding tbody and thead column widths. Somewhat inspired
by <http://www.quirksmode.org/js/fixedhead.html>. They still don't line
up perfectly, apparently due to browser quirks regarding how the
various widths are interpreted.

Michael

--
Michael Schuerig Nothing is as brilliantly adaptive
mailto:mi*****@schuerig.de as selective stupidity.
http://www.schuerig.de/michael/ --A.O. Rorty, The Deceptive Self

Jul 24 '05 #22

P: n/a
Michael Schuerig wrote:
Gus Richter wrote:
Michael Schuerig wrote:


You can allocate the problem where you want.


I didn't allocate. I just capsulated/reviewed.
Now you say you have a problem with column width inconsistencies?


Yes, sort of.


It works very well if done properly! See:
<http://www.home.golden.net/~richterf/Michael/Special.html>
for an example. Make modifications to your preference. You have to
search out your problem in your code yourself. If you can't find your
problem, start the table afresh without the height/overflow declaration
for tbody and if it looks ok, then add them in. Sectionalize and
minimize your work to simplify debugging and then work backwards or
start afresh.

--
Gus
Jul 24 '05 #23

P: n/a
Gus Richter wrote:
See:
<http://www.home.golden.net/~richterf/Michael/Special.html>
for an example.


Thanks! I'll see how to put the pieces together for my purpose.

Michael

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

Jul 24 '05 #24

P: n/a
Michael Schuerig wrote:
Gus Richter wrote:

See:
<http://www.home.golden.net/~richterf/Michael/Special.html>
for an example.

Thanks! I'll see how to put the pieces together for my purpose.


This DOM2 cross-browser method might interest you:

<http://www.gtalbot.org/HTMLJavascriptCSS/ScrollingTBody.html>

--
Gus
Jul 24 '05 #25

P: n/a
Gus Richter wrote:
Michael Schuerig wrote:
Gus Richter wrote:

See:
<http://www.home.golden.net/~richterf/Michael/Special.html>
for an example.

Thanks! I'll see how to put the pieces together for my purpose.


This DOM2 cross-browser method might interest you:

<http://www.gtalbot.org/HTMLJavascriptCSS/ScrollingTBody.html>


Thanks for pointing me there. Interesting. I must admit that I don't yet
understand how it works. Anyway, I've gone to a simpler layout with
moving table head.

Michael

--
Michael Schuerig Nothing is as brilliantly adaptive
mailto:mi*****@schuerig.de as selective stupidity.
http://www.schuerig.de/michael/ --A.O. Rorty, The Deceptive Self

Jul 24 '05 #26

This discussion thread is closed

Replies have been disabled for this discussion.