frozen/locked HTML table header

Discussion in 'HTML' started by matt@mailinator.com, Dec 15, 2006.

  1. Guest

    hello,

    like many intranet report developers, my users requested to have html
    table's headers locked in position -- allowing the <tbody> to scroll,
    but the <thead> to remain fixed in place.. similar to an excel document
    (i know the web isnt excel, but that doesnt stop my users from wanting
    it nonetheless).

    i knew that my technical requirements were:

    1) worked in IE & firefox
    2) was a true table, and used only one table (no multis, frames, div
    quasi-tables, etc)
    3) used CSS over javascript
    4) allowed for multiple scrolling-table instances on a page
    5) allowed content-rows to set header widths

    i did a bit of research on usenet & the web, and came up w/ something
    that worked. its largely based on this fellow's example:

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

    ....with some modifications to remove its named-instances, which makes
    for easier multi-use. it uses a CSS expression, which as i understand
    it is evaluated on every mouse movement.. however, that proved a
    non-issue in our environment, so it seemed better that maintaining my
    own javascript.

    if you are interested in the technique, its like so (ignore any typos,
    the gist is whats important):

    <style>
    table {
    width:100%;
    border:solid 1px gray;
    }
    thead tr { background-color:lavender; }
    tfoot td { background-color:lavender; }

    .scrollTable {
    height:321px; /*must be taller than tbody*/
    overflow:auto;
    margin:0 auto;
    border-bottom:1px solid slategray;
    }
    .scrollTable table>tbody { /*child selector syntax which IE6 and
    older do not support*/
    height:235px;
    overflow:auto;
    overflow-x:hidden;
    }
    .scrollTable thead tr {
    position:relative;

    top:expression(this.parentElement.parentElement.parentElement.scrollTop-2);
    }
    </style>


    <div class="scrollTable">
    <table border="1">
    <thead>
    <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
    <th>Header 4</th>
    </tr>
    <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
    <th>Header 4</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
    <td colspan="4">footer</td>
    </tr>
    </tfoot>
    <tbody>
    <tr>
    <td>row data</td>
    <td>row data</td>
    <td>row data</td>
    <td>row data</td>
    </tr>
    ...
    </tbody>
    </table>
    </div>

    (repeat tables as necessary)


    ....its proving useful to my users, and perhaps it could for yours too.

    matt
    , Dec 15, 2006
    #1
    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. Cristof Falk
    Replies:
    1
    Views:
    469
    =?Utf-8?B?U2hhamk=?=
    May 13, 2005
  2. Petros
    Replies:
    0
    Views:
    3,203
    Petros
    Aug 20, 2003
  3. mlt
    Replies:
    2
    Views:
    831
    Jean-Marc Bourguet
    Jan 31, 2009
  4. est
    Replies:
    1
    Views:
    549
  5. LC Geldenhuys
    Replies:
    5
    Views:
    254
    Robert Klemme
    Feb 18, 2004
Loading...

Share This Page