Scrollable Table with Fixed Headers

Discussion in 'HTML' started by Mel Smith, Jun 6, 2010.

  1. Mel Smith

    Mel Smith Guest

    Hi:
    Need some guidance on how to construct Fixed headers on top of a
    Scrollable table.

    I have many hundreds of rows (and 5 text columns) in a table, but I need
    to keep my column headers visible while user is scrolling down thru the
    rows.

    I have scoured my books (even Flanagan's JaveScript Edition 5), but
    can't find a hint.

    Would someone give me a kick-start please ??

    Thank you.

    -Mel Smith



    --
    Mel Smith
     
    Mel Smith, Jun 6, 2010
    #1
    1. Advertising

  2. Mel Smith

    rf Guest

    "Mel Smith" <> wrote in message
    news:...
    > Hi:
    > Need some guidance on how to construct Fixed headers on top of a
    > Scrollable table.
    >
    > I have many hundreds of rows (and 5 text columns) in a table, but I
    > need to keep my column headers visible while user is scrolling down thru
    > the rows.
    >
    > I have scoured my books (even Flanagan's JaveScript Edition 5), but
    > can't find a hint.


    Did you think of using something novel, like google?

    A google search for scrollable table with fixed headers gives thousands of
    hits. The very first one does exactly what you want.

    Note though that most solutions will not work with IE, if if they do then
    only with some specific version. For example the first hit above works
    nicely in IE6 but fails in IE8.
     
    rf, Jun 6, 2010
    #2
    1. Advertising

  3. Mel Smith

    Neil Gould Guest

    Mel Smith wrote:
    > Hi:
    > Need some guidance on how to construct Fixed headers on top of a
    > Scrollable table.
    >
    > I have many hundreds of rows (and 5 text columns) in a table, but
    > I need to keep my column headers visible while user is scrolling down
    > thru the rows.
    >
    > I have scoured my books (even Flanagan's JaveScript Edition 5),
    > but can't find a hint.
    >
    > Would someone give me a kick-start please ??
    >
    > Thank you.
    >

    This is exactly the kind of presentational issue that is easy to do with
    framesets and nearly impossible to make work in the majority of browsers by
    just using CSS or JavaScript. If you're philosophically opposed to
    framesets, or are willing to exclude most users, I hope you have a lot of
    hair to lose.

    --
    best regards,

    Niel
     
    Neil Gould, Jun 6, 2010
    #3
  4. Mel Smith

    Mel Smith Guest

    rf said:

    > Did you think of using something novel, like google?


    Yes, I spent an hour looking over all the stuff (as you noted) and
    couldn't find anything useable for me at my level.

    Thanks for the response.

    -Mel
     
    Mel Smith, Jun 6, 2010
    #4
  5. Mel Smith

    Mel Smith Guest

    Neil said:

    > This is exactly the kind of presentational issue that is easy to do with
    > framesets and nearly impossible to make work in the majority of browsers
    > by
    > just using CSS or JavaScript. If you're philosophically opposed to
    > framesets, or are willing to exclude most users, I hope you have a lot of
    > hair to lose.


    Neil:

    Since I'm also trying to use the headers for 'sortable' columns *and*
    having fixed headers, I guess I'm out of luck.

    One more thought occurred while mulling over the problem last nite:

    Perhaps I can have a <div> at the top of the table that 'looks like' a
    header row , but is clickable for sorting the table below (and would
    certainly be 'fixed' ).

    Thanks for the response.

    -Mel
     
    Mel Smith, Jun 6, 2010
    #5
  6. Mel Smith

    Neil Gould Guest

    Mel Smith wrote:
    > Neil said:
    >
    >> This is exactly the kind of presentational issue that is easy to do
    >> with framesets and nearly impossible to make work in the majority of
    >> browsers by
    >> just using CSS or JavaScript. If you're philosophically opposed to
    >> framesets, or are willing to exclude most users, I hope you have a
    >> lot of hair to lose.

    >
    > Neil:
    >
    > Since I'm also trying to use the headers for 'sortable' columns
    > *and* having fixed headers, I guess I'm out of luck.
    >

    Not really (see below).

    > One more thought occurred while mulling over the problem last
    > nite:
    >
    > Perhaps I can have a <div> at the top of the table that 'looks
    > like' a header row , but is clickable for sorting the table below
    > (and would certainly be 'fixed' ).
    >

    The "clickable" aspect is a matter of having an action for a button labelled
    with the column name, and is independent of the method used to fix the
    header. Fixing the header so that it is static in most browsers is another
    matter, and, once again, is the kind of thing framesets make simple.

    --
    best regards,

    Neil
     
    Neil Gould, Jun 6, 2010
    #6
  7. Gazing into my crystal ball I observed "Mel Smith"
    <> writing in
    news::

    > Hi:
    > Need some guidance on how to construct Fixed headers on top of a
    > Scrollable table.
    >
    > I have many hundreds of rows (and 5 text columns) in a table, but
    > I need
    > to keep my column headers visible while user is scrolling down thru
    > the rows.
    >
    > I have scoured my books (even Flanagan's JaveScript Edition 5),
    > but
    > can't find a hint.
    >
    > Would someone give me a kick-start please ??
    >
    > Thank you.
    >
    > -Mel Smith
    >
    >
    >


    I usually do a few things for tables with a lot of data:

    1. I use both thead and tfoot, that way when the user gets to the bottom
    of the table, they still know where they are.
    2. I use "green bar" rows, rows of alternating color. That is simple to
    do server side.
    3. I use javascript to "highlight" the row the user is on.
    4. I use the thead and tfoot to sort the data, or I use a form select
    above the table that the user and choose which column on which to sort.
    I do that sorting server side, a lot easier and works for the client,
    with or without javascript enabled.

    <script type="text/javascript">
    function mark_row(t) {
    t.style.backgroundColor = '#F6ECE2';
    }
    function unmark_row(t) {
    t.style.backgroundColor = 'transparent';
    }
    </script>
    </head>
    <body>
    <table>
    <caption>Caption</caption>
    <thead>
    <tr>
    <th><a href="<?php echo $_SERVER['SCRIPT_NAME']?>?sort=1">Field1</a>
    </th><th><a href="<?php echo $_SERVER['SCRIPT_NAME']?>?sort=2">Field2
    </a></th><th><a href="<?php echo $_SERVER['SCRIPT_NAME']?>?sort=2">
    Field3</a></th>
    </tr>
    </thead>
    <tfoot>
    <tr>
    <th><a href="<?php echo $_SERVER['SCRIPT_NAME']?>?sort=1">Field1</a>
    </th><th><a href="<?php echo $_SERVER['SCRIPT_NAME']?>?sort=2">Field2
    </a></th><th><a href="<?php echo $_SERVER['SCRIPT_NAME']?>?sort=2">
    Field3</a></th>
    </tr>
    </tfoot>
    <tbody>
    <?php
    $i = 0;
    while ($row = mysql_fetch_array($rs,MYSQL_NUM))
    {
    $field1 = $row[0];
    $field2 = $row[1];
    $field3 = $row[2];

    if($i%2==0)
    {$trclass = "class=".chr(34)."greenrow".chr(34);}
    else
    {$trclass = "class=".chr(34)."whiterow".chr(34);}

    ?>
    <tr <?php echo $trclass; ?> onmouseover="markrow(this);">
    <td><?php echo $field1; ?></td><td><?php echo $field2; ?></td><td><?php
    echo $field3; ?></td>

    </tr>
    <?php
    ++$i;
    }
    mysql_free_result($rs);
    ?>
    </tbody>
    </table>

    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
     
    Adrienne Boswell, Jun 6, 2010
    #7
  8. Mel Smith

    Andy Dingley Guest

    On 6 June, 13:09, "Neil Gould" <> wrote:

    > This is exactly the kind of presentational issue that is easy to do with
    > framesets


    It isn't. You can certainly do something a bit like it with a
    frameset, but one of the great advantages of <table> is it's good
    behaviour for auto-setting column width. Framesets break this, as they
    decouple header and body.
     
    Andy Dingley, Jun 6, 2010
    #8
  9. Mel Smith

    Mel Smith Guest

    Adrienne said:

    >
    > I usually do a few things for tables with a lot of data:
    >
    > 1. I use both thead and tfoot, that way when the user gets to the bottom
    > of the table, they still know where they are.
    > 2. I use "green bar" rows, rows of alternating color. That is simple to
    > do server side.
    > 3. I use javascript to "highlight" the row the user is on.
    > 4. I use the thead and tfoot to sort the data, or I use a form select
    > above the table that the user and choose which column on which to sort.
    > I do that sorting server side, a lot easier and works for the client,
    > with or without javascript enabled.
    >
    > <script type="text/javascript">
    > function mark_row(t) {
    > t.style.backgroundColor = '#F6ECE2';
    > }
    > function unmark_row(t) {
    > t.style.backgroundColor = 'transparent';
    > }
    > </script>
    > </head>
    > <body>
    > <table>
    > <caption>Caption</caption>
    > <thead>
    > <tr>
    > <th><a href="<?php echo $_SERVER['SCRIPT_NAME']?>?sort=1">Field1</a>
    > </th><th><a href="<?php echo $_SERVER['SCRIPT_NAME']?>?sort=2">Field2
    > </a></th><th><a href="<?php echo $_SERVER['SCRIPT_NAME']?>?sort=2">
    > Field3</a></th>
    > </tr>
    > </thead>
    > <tfoot>
    > <tr>
    > <th><a href="<?php echo $_SERVER['SCRIPT_NAME']?>?sort=1">Field1</a>
    > </th><th><a href="<?php echo $_SERVER['SCRIPT_NAME']?>?sort=2">Field2
    > </a></th><th><a href="<?php echo $_SERVER['SCRIPT_NAME']?>?sort=2">
    > Field3</a></th>
    > </tr>
    > </tfoot>
    > <tbody>
    > <?php
    > $i = 0;
    > while ($row = mysql_fetch_array($rs,MYSQL_NUM))
    > {
    > $field1 = $row[0];
    > $field2 = $row[1];
    > $field3 = $row[2];
    >
    > if($i%2==0)
    > {$trclass = "class=".chr(34)."greenrow".chr(34);}
    > else
    > {$trclass = "class=".chr(34)."whiterow".chr(34);}
    >
    > ?>
    > <tr <?php echo $trclass; ?> onmouseover="markrow(this);">
    > <td><?php echo $field1; ?></td><td><?php echo $field2; ?></td><td><?php
    > echo $field3; ?></td>
    >
    > </tr>
    > <?php
    > ++$i;
    > }
    > mysql_free_result($rs);
    > ?>
    > </tbody>
    > </table>



    Adrienne:

    I'll look over your page code above carefully tomorrow. (I've been
    golfing and drinking, and I've got to rest up for a few hours now :)) )

    Thank you.

    (btw, I use a C-based CGI app on my server (which sits beside me
    faithfully and loyally for months at a time)


    -Mel Smith
     
    Mel Smith, Jun 7, 2010
    #9
  10. Mel Smith

    richard Guest

    On Sun, 6 Jun 2010 08:09:36 -0400, Neil Gould wrote:

    > Mel Smith wrote:
    >> Hi:
    >> Need some guidance on how to construct Fixed headers on top of a
    >> Scrollable table.
    >>
    >> I have many hundreds of rows (and 5 text columns) in a table, but
    >> I need to keep my column headers visible while user is scrolling down
    >> thru the rows.
    >>
    >> I have scoured my books (even Flanagan's JaveScript Edition 5),
    >> but can't find a hint.
    >>
    >> Would someone give me a kick-start please ??
    >>
    >> Thank you.
    >>

    > This is exactly the kind of presentational issue that is easy to do with
    > framesets and nearly impossible to make work in the majority of browsers by
    > just using CSS or JavaScript. If you're philosophically opposed to
    > framesets, or are willing to exclude most users, I hope you have a lot of
    > hair to lose.


    I have been given the moniker, "stoopid", by numerous people. Yet, even I
    would never ever even suggest using framesets for such an undertaking.

    I don't even recommend framesets for anything.


    --
    I learned my lesson well. You can't please everyone, so you got to please
    yourself.
    - Ricky Nelson from "Garden Party"
     
    richard, Jun 7, 2010
    #10
  11. Mel Smith

    dorayme Guest

    In article <>,
    richard <> wrote:

    > I have been given the moniker, "stoopid", by numerous people. Yet, even I
    > would never ever even suggest using framesets for such an undertaking.
    >
    > I don't even recommend framesets for anything.


    What about for gobbling up people's memory and freezing their
    machines by having frames load that are themselves framesets, all
    the way down like turtles? Have you no devil in your bones?

    --
    dorayme
     
    dorayme, Jun 7, 2010
    #11
  12. On Jun 7, 11:25 am, Evan Platt <>
    wrote:
    > No, by everyone. And it's very well earned. I could go into dozens of
    > examples, but what's the point, you deny them or simply crawl back
    > under your bridge.


    Evan, is your opinions so unimportant that you believe no one will
    want to read it a year from now?

    If not, then why the **** do you set your post to expire in 6 days? I
    would think that you would want to share your knowledge with others in
    the future.

    If that's not the case then shut the **** up and just go away now.

    Sincerely,

    TN
     
    Travis Newbury, Jun 7, 2010
    #12
  13. Mel Smith

    dorayme Guest

    In article <>,
    Evan Platt <> wrote:

    > On Sun, 6 Jun 2010 21:30:41 -0500, richard <> wrote:
    >
    > >I have been given the moniker, "stoopid", by numerous people.

    >
    > No, by everyone.


    He didn't say everyone. He said numerous people. And this could
    be a very small number of people depending on the sample's
    container.

    > And it's very well earned.
    > I could go into dozens of
    > examples, but what's the point, you deny them or simply crawl back
    > under your bridge.


    Has he denied them? My impression was simply that he never
    commented on such barbs, and, being a truck driver, simply
    checked to see that his iron bar was still under his seat. Enjoy
    saying things like this from the safety of your keyboard.

    And, btwmy, continue to do photography by ESP, I assume this is a
    form of 'capturing ether'.

    --
    dorayme
     
    dorayme, Jun 7, 2010
    #13
  14. Mel Smith

    richard Guest

    On Tue, 08 Jun 2010 08:15:34 +1000, dorayme wrote:

    > In article <>,
    > Evan Platt <> wrote:
    >
    >> On Sun, 6 Jun 2010 21:30:41 -0500, richard <> wrote:
    >>
    >>>I have been given the moniker, "stoopid", by numerous people.

    >>
    >> No, by everyone.

    >
    > He didn't say everyone. He said numerous people. And this could
    > be a very small number of people depending on the sample's
    > container.
    >
    >> And it's very well earned.
    >> I could go into dozens of
    >> examples, but what's the point, you deny them or simply crawl back
    >> under your bridge.

    >
    > Has he denied them? My impression was simply that he never
    > commented on such barbs, and, being a truck driver, simply
    > checked to see that his iron bar was still under his seat. Enjoy
    > saying things like this from the safety of your keyboard.


    I simply ignore the bullshit.


    >
    > And, btwmy, continue to do photography by ESP, I assume this is a
    > form of 'capturing ether'.


    The only reason Evan posts, is to harass me. He feels that it is his God
    given duty to continously advise others of my "stupidness". As you know, a
    bandwagon that was started years ago before Evan came along.

    As I have said many times, because of the harassment I have received over
    the years, if I say it, it is stupid and wrong. If someone else says the
    exact same thing, it's good.

    As for Evan's ESP photography website, the ESP comes from his ham radio
    license. KG6ESP.



    --
    I learned my lesson well. You can't please everyone, so you got to please
    yourself.
    - Ricky Nelson from "Garden Party"
     
    richard, Jun 8, 2010
    #14
  15. Mel Smith

    Mel Smith Guest

    Re: Scrollable Table with Fixed Headers [resolved]

    Hi:

    I've resolved the issue by:

    Introducing another 'header' table immediately *above* the main table in
    question.

    This new table has only a <thead> element with <th> elements matching
    the <td> elements of the main table.

    It also has a fixed-layout with the same width, etc, etc but has no
    <tbody> element

    The main table is also a fixed-layout and has a <tfoot> element with no
    <thead> element

    So, the look of the whole mess is actually very reasonable, and the user
    can scroll down thru hundreds of rows and still see (what looks like) the
    fixed header of the main table still on the screen.

    My next task is to make several of the 1-row columns in this 'top'
    table, be 'clickable' so that I can toggle the sort of the *main* table when
    these header <th> elements are clicked.

    Thanks for the help offered. (and the abuse is actually welcome comic
    relief. Keep it up !)

    -Mel Smith
     
    Mel Smith, Jun 8, 2010
    #15
  16. Mel Smith

    dorayme Guest

    Re: Scrollable Table with Fixed Headers [resolved]

    In article <>,
    "Mel Smith" <> wrote:

    > I've resolved the issue


    It would be nice to post a URL of your discovery so that this can
    be helpful to others.

    --
    dorayme
     
    dorayme, Jun 8, 2010
    #16
  17. Mel Smith

    Mel Smith Guest

    Re: Scrollable Table with Fixed Headers [resolved]

    dorayme said:

    >> I've resolved the issue

    >
    > It would be nice to post a URL of your discovery so that this can
    > be helpful to others.



    Yes, I'll do that, but to the experts here, it will probably seem
    trivial. (my forte/expertise is database work. I've been told that my
    presentation skills are childish/amateurish/pukey).

    But, I neglected to mention that the single <th> row of the 'header'
    table is in a <div> by itself, as is the main table.

    I'm working steadily on the main page, and changing its presentation
    constantly, but when it stabilizes and I get the courage, I'll post the URL.

    Thank you for responding

    -Mel
     
    Mel Smith, Jun 8, 2010
    #17
  18. Mel Smith

    dorayme Guest

    Re: Scrollable Table with Fixed Headers [resolved]

    In article <>,
    "Mel Smith" <> wrote:

    > dorayme said:
    >
    > >> I've resolved the issue

    > >
    > > It would be nice to post a URL of your discovery so that this can
    > > be helpful to others.

    >
    >
    > Yes, I'll do that, but to the experts here, it will probably seem
    > trivial. ....
    > I'm working steadily on the main page, and changing its presentation
    > constantly, but when it stabilizes and I get the courage, I'll post the URL.
    >


    Fair enough.

    I guess you looked at

    <http://www.imaputz.com/cssStuff/bigFourVersion.html>

    which seems OK?

    The author even gives a link to another version that even tries
    to cater for IE5 (fancy bothering!)

    --
    dorayme
     
    dorayme, Jun 8, 2010
    #18
  19. Mel Smith

    rf Guest

    Re: Scrollable Table with Fixed Headers [resolved]

    "Mel Smith" <> wrote in message
    news:...
    > dorayme said:
    >
    >>> I've resolved the issue

    >>
    >> It would be nice to post a URL of your discovery so that this can
    >> be helpful to others.

    >
    >
    > Yes, I'll do that, but to the experts here, it will probably seem
    > trivial. (my forte/expertise is database work. I've been told that my
    > presentation skills are childish/amateurish/pukey).
    >
    > But, I neglected to mention that the single <th> row of the 'header'
    > table is in a <div> by itself, as is the main table.


    In a div? A div that/s inside the table?

    as in
    <table>
    <div>
    <td>
    ?

    That's invalid html.
     
    rf, Jun 9, 2010
    #19
  20. Mel Smith

    Mel Smith Guest

    Re: Scrollable Table with Fixed Headers [resolved]

    rf said:

    >> But, I neglected to mention that the single <th> row of the 'header'
    >> table is in a <div> by itself, as is the main table.

    >
    > In a div? A div that/s inside the table?
    >
    > as in
    > <table>
    > <div>
    > <td>
    > ?
    >
    > That's invalid html.


    No, I 'misspoke'. I intended to say that the top 'header' fixed-layout
    table is in its own div, and the main table is also within its <div>.

    The borders are 'collapsed' so that the Header Table (with just the one
    <thead><tr>row situated just a couple of pixels above the first row of the
    main table.

    Here is the css for this table-combo:

    Above this (inter alia) is a container <div> with position: relative;

    Also, I had to hard code the widths because (I guess) 'fixed-layout' for
    a table *requires* absolute widths

    div#headerrow {
    position: absolute;
    top: 195px;
    width: 820px;
    height: 50px;
    left: 49%; /* I require this but don't know why ?? */
    padding: 2px;
    margin: 0 0 0 -415px;
    overflow: auto;
    }
    div#tableselect {
    position: absolute;
    top: 250px;
    width: 820px;
    height: 230px;
    left: 50%; /* as opposed to this */
    padding: 2px;
    margin: 0 0 0 -415px;
    overflow: auto;
    }


    -Mel Smith
     
    Mel Smith, Jun 9, 2010
    #20
    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. sonali
    Replies:
    1
    Views:
    3,469
    eliza81
    Mar 8, 2010
  2. Marcus
    Replies:
    0
    Views:
    484
    Marcus
    Oct 6, 2008
  3. Stephen P.

    Scrollable Datagrid w/ fixed headers AND sorting?

    Stephen P., Jun 24, 2004, in forum: ASP .Net Datagrid Control
    Replies:
    0
    Views:
    159
    Stephen P.
    Jun 24, 2004
  4. Mel
    Replies:
    2
    Views:
    198
    Thomas 'PointedEars' Lahn
    Jul 10, 2004
  5. Replies:
    4
    Views:
    177
Loading...

Share This Page