INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Table Formatting

How to keep the header row of a table from scrolling when table content gets too tall. by Einstein47
Posted: 22 Jul 05

We have all had a page with a table where the content is loaded dynamically and we don't have any idea of the number of rows. It becomes especially difficult when we want the header row to stay fixed while the rest of the content is scrolled. I found this trick that works in IE 5.5+ (untested in other browsers).

CODE

<div style="height: 250px; overflow: auto;">
<table cellspacing="2">
  <tr style="position: relative; top: expression(this.offsetParent.scrollTop-2);">
    <th style="background: #003366; color: white;"> Table Title </th>
    .
    .
    .
  </tr>
  <tr>
    <td> content </td>
  </tr>
    .
    .
    .
</table>
</div>

What this is doing is putting your table inside a DIV tag of fixed height (you can change this to fit your page - either % or px work best), but allowing for the content to be scrollable. Then the style added on the first TR tag instructs the browser to dynamically position that row at the top of the DIV regardless of the scrolling.

There is one important thing to note. The value in your cellspacing must match the value at the end of the expression in the TR style. If you don't specify a value in the TABLE for cellspacing it will default to 2. Play with it to see the different results.

This is very useful when using PHP, ASP, JSP that can generate exceedingly tall tables. The only slight defect is a visual blur that happens while scrolling. However that stops when the scrolling stops. Also be aware that if you have SELECT dropdown lists in the content of your table, they will be displayed above (in the z-order) the header row (a condition that exists in all browsers).

Good luck, and happy coding.

Back to HTML, XHTML & CSS FAQ Index
Back to HTML, XHTML & CSS Forum

My Archive

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close