Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Make column headers always visible!

Reply
Thread Tools

Make column headers always visible!

 
 
Hans
Guest
Posts: n/a
 
      12-20-2004
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


 
Reply With Quote
 
 
 
 
Steve Pugh
Guest
Posts: n/a
 
      12-20-2004
On Mon, 20 Dec 2004 14:40:38 +0100, "Hans" <(E-Mail Removed)> wrote:

>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

 
Reply With Quote
 
 
 
 
Steve Greenaway
Guest
Posts: n/a
 
      12-20-2004
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_...ect.html#Nomen

--
- Steve
"I think a good friend would recommend CLR to all his friends."
 
Reply With Quote
 
Steve Pugh
Guest
Posts: n/a
 
      12-20-2004
On 20 Dec 2004 14:22:31 GMT, Steve Greenaway <(E-Mail Removed)>
wrote:
>Kermit the Frog stuck a mic in Steve's face, who said:
>
>>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.


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

 
Reply With Quote
 
Hans
Guest
Posts: n/a
 
      12-21-2004
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


 
Reply With Quote
 
Richard Cornford
Guest
Posts: n/a
 
      12-21-2004
Hans wrote:
<snip>
> ... 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/examp...bleScroll.html >

Richard.


 
Reply With Quote
 
Nico Schuyt
Guest
Posts: n/a
 
      12-22-2004
Hans wrote:
> Is it possible to have the first row in a table to be always visible.


http://web.tampabay.rr.com/bmerkey/e...le-header.html

--
Nico
http://www.nicoschuyt.nl


 
Reply With Quote
 
Hans
Guest
Posts: n/a
 
      12-22-2004

> http://web.tampabay.rr.com/bmerkey/e...le-header.html


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

Regards
/Hans


 
Reply With Quote
 
DU
Guest
Posts: n/a
 
      12-25-2004
Steve Pugh wrote:
> On Mon, 20 Dec 2004 14:40:38 +0100, "Hans" <(E-Mail Removed)> wrote:
>
>
>>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;}
>


[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
--
The site said to use Internet Explorer 5 or better... so I switched to
Mozilla 1.7.5
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Problem with wsgiref.headers.Headers Phil Python 4 01-17-2010 04:47 PM
Server cannot clear headers after HTTP headers have been sent Ian ASP .Net Security 2 03-20-2007 09:00 AM
when to dynamically change datagrid column headers gh0st54 ASP .Net 0 01-30-2005 11:13 PM
Trying to create a CSS box that is always is always the width of an image placed inside it (and no wider) Deryck HTML 4 06-22-2004 08:25 PM
Reading 'received' headers: Email Headers Parsing dont bother Python 0 03-03-2004 08:18 PM



Advertisments