Fixed Position of a Table Header

Discussion in 'Javascript' started by vunet.us@gmail.com, Sep 19, 2006.

  1. Guest

    This beautiful code allows a table header to be not scrollable in IE.
    Since Firefox does not support this CSS method expression(...), the
    code does not do the desired work in Firefox or other Mozilla browsers.
    What is the workaround here? I tried position: fixed for Mozilla, but
    it is making my table header unrelevant to the table, as if these are
    two different objects.

    <div style="overflow:auto; height:100px;">
    <table cellspacing="0" cellpadding="0" width="100%">
    <thead>
    <tr style="position:relative;
    top:expression(this.offsetParent.scrollTop);background-color:#dddddd;">
    <th nowrap>Header A</th>
    <th nowrap>Header B</th>
    <th nowrap>Header C</th>
    </tr>
    </thead>
    <tbody>

    <tr><td>aaaaaaaaaaaaaaaaaaa</td><td>b</td><td>ccccccccccccccccccc</td></tr>
    <tr><td>a</td><td>bbbbbbb</td><td>c</td></tr>
    <tr><td>a</td><td>b</td><td>c</td></tr>
    <tr><td>a</td><td>b</td><td>c</td></tr>
    <tr><td>a</td><td>b</td><td>c</td></tr>
    <tr><td>a</td><td>b</td><td>c</td></tr>
    <tr><td>a</td><td>b</td><td>c</td></tr>
    <tr><td>a</td><td>b</td><td>c</td></tr>
    <tr><td>a</td><td>b</td><td>c</td></tr>
    <tr><td>a</td><td>b</td><td>c</td></tr>
    <tr><td>a</td><td>b</td><td>c</td></tr>
    <tr><td>a</td><td>b</td><td>c</td></tr>
    </tbody>
    </table>
    </div>
    , Sep 19, 2006
    #1
    1. Advertising

  2. Tim Slattery Guest

    wrote:

    >This beautiful code allows a table header to be not scrollable in IE.
    >Since Firefox does not support this CSS method expression(...), the
    >code does not do the desired work in Firefox or other Mozilla browsers.
    >What is the workaround here? I tried position: fixed for Mozilla, but
    >it is making my table header unrelevant to the table, as if these are
    >two different objects.


    In Firefox you can use the <tbody> element to surround the body of the
    table and use appropriate CSS to make it scrollable:
    <table>
    <thead>
    <tr bgcolor="#FFFFCC">
    <td align="center">
    Respondent Name
    </td>
    <td align="center">
    Company Name
    </td>
    <td align="center">
    Solicitation Number
    </td>
    </tr>
    </thead>
    <tbody style="overflow:auto;height:200px;width:100%">

    <tr>
    <td align="center">102803</td>
    <td align="center">102803dgs</td>
    <td align="center">215872321</td>
    </tr>

    <tr>
    <td align="center">102903</td>
    <td align="center">102903</td>
    <td align="center">215872324</td>
    </tr>
    </tbody>
    </table>

    IE doesn't properly handle style="overflow" in <tbody>. (I don't know
    whether this is fixed in IE7.) If there's a way that works in both
    browsers, I don't know what it is.

    --
    Tim Slattery
    Tim Slattery, Sep 19, 2006
    #2
    1. Advertising

  3. Guest

    It's amazing. So simple and perfect.
    Though I did come across some problems. My page does a 10 sec refresh
    and when innerHTML repaints the table, flickering caused by scrollbars
    occurs. This is not visible if no scrollbars are shown. But I will see
    if there is a way to handle this.
    Thanks a lot.
    , Sep 19, 2006
    #3
    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. Webby
    Replies:
    0
    Views:
    1,078
    Webby
    Sep 18, 2004
  2. The Litwaks
    Replies:
    10
    Views:
    21,472
    Travis Newbury
    Jan 13, 2005
  3. Bo
    Replies:
    4
    Views:
    1,356
    dorayme
    Jul 26, 2009
  4. Mel
    Replies:
    2
    Views:
    193
    Thomas 'PointedEars' Lahn
    Jul 10, 2004
  5. Matt Kruse
    Replies:
    17
    Views:
    234
    Mick White
    Sep 3, 2004
Loading...

Share This Page