Make column headers always visible!

Discussion in 'HTML' started by Hans, Dec 20, 2004.

  1. Hans

    Hans Guest

    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
     
    Hans, Dec 20, 2004
    #1
    1. Advertising

  2. Hans

    Steve Pugh Guest

    On Mon, 20 Dec 2004 14:40:38 +0100, "Hans" <> 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
     
    Steve Pugh, Dec 20, 2004
    #2
    1. Advertising

  3. 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
    "I think a good friend would recommend CLR to all his friends."
     
    Steve Greenaway, Dec 20, 2004
    #3
  4. Hans

    Steve Pugh Guest

    On 20 Dec 2004 14:22:31 GMT, Steve Greenaway <>
    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
     
    Steve Pugh, Dec 20, 2004
    #4
  5. Hans

    Hans Guest

    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
     
    Hans, Dec 21, 2004
    #5
  6. Richard Cornford, Dec 21, 2004
    #6
  7. Hans

    Nico Schuyt Guest

    Nico Schuyt, Dec 22, 2004
    #7
  8. Hans

    Hans Guest

    Hans, Dec 22, 2004
    #8
  9. Hans

    DU Guest

    Steve Pugh wrote:
    > On Mon, 20 Dec 2004 14:40:38 +0100, "Hans" <> 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 :)
     
    DU, Dec 25, 2004
    #9
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. spamfurnace
    Replies:
    1
    Views:
    2,647
    Scott M.
    May 24, 2004
  2. Patrick Olurotimi Ige
    Replies:
    7
    Views:
    6,006
    Patrick Olurotimi Ige
    Jun 15, 2005
  3. Keithb
    Replies:
    2
    Views:
    1,162
  4. Miki
    Replies:
    4
    Views:
    541
  5. Jurjen de Groot
    Replies:
    0
    Views:
    317
    Jurjen de Groot
    May 19, 2008
Loading...

Share This Page