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

[Martin Honnen]

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

In article <d6**********@n ewsreader3.netc ologne.de>,
Michael Schuerig <mi*****@schuer ig.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:scrol l;"
and "max-height" to the tbody.

May not work in all browsers, but what will?

--
= Eric Bustad, Norwegian bachelor programmer

[Michael Schuerig]

Eric Kenneth Bustad wrote:

In article <d6**********@n ewsreader3.netc ologne.de>,
Michael Schuerig <mi*****@schuer ig.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
independent ly 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:scrol l;" 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

[Michael Schuerig]

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

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

[Eric Kenneth Bustad]

In article <d6**********@n ewsreader3.netc ologne.de>,
Michael Schuerig <mi*****@schuer ig.de> wrote:

Eric Kenneth Bustad wrote:

In article <d6**********@n ewsreader3.netc ologne.de>,
Michael Schuerig <mi*****@schuer ig.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
independentl y 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:scrol l;" 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

[Michael Schuerig]

Eric Kenneth Bustad wrote:

In article <d6**********@n ewsreader3.netc ologne.de>,
Michael Schuerig <mi*****@schuer ig.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

[kchayka]

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.

[Martin Honnen]

Michael Schuerig wrote:

Martin Honnen wrote:

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.

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/

[Michael Schuerig]

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/