Make column headers always visible!

[Hans]

Is it possible to have the first row in a table to be always visible. The
first row contains the column headers and when the user scrolls down the
table I still want the column headers to be visible. I am stuck with the
table (I know most of you don't like using tables but that part I cannot
change right now). Is it possible to add a <div> with the column headers
that are "floating" above the table and is fixed (even if the user scrolls
down)? Is there a way of getting the width of the columns so I can align the
column headers in the div with the actual table columns?

In this matter I need to support IE5.5+ and NN7+.

Regards
/Hans

 

[Steve Pugh]

Is it possible to have the first row in a table to be always visible. The
first row contains the column headers and when the user scrolls down the
table I still want the column headers to be visible. I am stuck with the
table (I know most of you don't like using tables but that part I cannot
change right now).

If your columns have headers then you probably have a data table, so a
table is the 100% correct thing to use.

<table>
<thead>...headers...</thead>
<tbody>...data...</tbody>
</table>

tbody {height: 20em; overflow: scroll;}

Shame that IE doesn't support it.

Is it possible to add a <div> with the column headers
that are "floating" above the table and is fixed (even if the user scrolls
down)?

Yes. But that would involve either frames (and all the problems that
entails) or position: fixed (which again isn't supported by IE). Or
some unlovely JavaScript.

Is there a way of getting the width of the columns so I can align the
column headers in the div with the actual table columns?

More unlovely JavaScript.

Sad to say, but the most reliable way is to repeat the headers every X
rows.

Steve

 

[Steve Greenaway]

Kermit the Frog stuck a mic in Steve's face, who said:

<table>
<thead>...headers...</thead>
<tbody>...data...</tbody>
</table>

tbody {height: 20em; overflow: scroll;}

Wow, browsers finally support this!

Shame that IE doesn't support it.

grumble grumble...

The only problem I see in Firefox is that it doesn't shrink the content
horizontally when it sticks the vertial scrollbar into the table. Thus
the content goes outside of the viewable area and you get horizontal
scroll in a table that would otherwise be fluid.

http://www.engsoc.org/~macfisto/4th_year_project.html#Nomen

 

[Steve Pugh]

Kermit the Frog stuck a mic in Steve's face, who said:


Wow, browsers finally support this!


grumble grumble...

The only problem I see in Firefox is that it doesn't shrink the content
horizontally when it sticks the vertial scrollbar into the table. Thus
the content goes outside of the viewable area and you get horizontal
scroll in a table that would otherwise be fluid.

Yeah, there are a few issues that need to be worked round but as IE
doesn't support it at all I didn't feel the need to go into them in my
original post.

Steve

 

[Hans]

Hi and thanks for the answer!

I did get this to work on NN7 but I see a horizontal scrollbar for some
reason (the content in the table fits in the page so the horizontal
scrollbar is useless in this case). Well setting the width does not seem to
get rid of the scrollbar but I guess there are style attributes that will
remove this?

I guess I will have to investigate a <div> solution together with javascript
(the page is an internal page and we use a lot of javascript already and we
know that all users have javascript enabled). If you know a working solution
for this or an example page please reply a link.


Regards
/Hans

 

[Richard Cornford]

Hans wrote:

... we know that all users have javascript enabled). If you
know a working solution for this or an example page please
reply a link.

It isn't a 'solution' but you may regard it as an example:-

<URL: http://www.litotes.demon.co.uk/example_scripts/tableScroll.html >

Richard.

 

[Nico Schuyt]

Is it possible to have the first row in a table to be always visible.

http://web.tampabay.rr.com/bmerkey/examples/nonscroll-table-header.html

 

[Hans]

http://web.tampabay.rr.com/bmerkey/examples/nonscroll-table-header.html

Wow excellent. This was exactly what I was looking for!

Regards
/Hans

 

[DU]

If your columns have headers then you probably have a data table, so a
table is the 100% correct thing to use.

<table>
<thead>...headers...</thead>
<tbody>...data...</tbody>
</table>

tbody {height: 20em; overflow: scroll;}

[snip]

I wonder why you do not propose
overflow: auto
which IMO is more in the spirit of the design requirements.
Not that your solution does not work...

DU