A Scrollable Table With a Fixed Header


NOTE: the concepts presented in this article are now considered obsolete possibly because better alternatives are available.
Search the comments to this article for a few external links to better implementations.

If you need to present a lot of table based data, but you don't want to spoil your page layout with a very long table, you can use the following trick to create a scrollable table with a fixed header.

To embed a scrollable table with a fixed header in your page, you don't have to use an <iframe> tag; all you need is a simple <div> with some CSS applied, like this:

<table style="width: 300px" cellpadding="0" cellspacing="0">
<tr>
  <td>Column 1</td>
  <td>Column 2</td>
</tr>
</table>

<div style="overflow: auto;height: 100px; width: 320px;">
  <table style="width: 300px;" cellpadding="0" cellspacing="0">
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  </table>
</div>

This creates a fixed column header with the scrollable table below it. The trick is to embed the table you want to scroll in a <div> tag with the overflow attribute set to auto. This will force the browser to display a scrollbar when the contents of the inner table are larger than the height of the surrounding <div>.

The width of the outer <div> must be larger than the width if the inner table to accommodate for the scrollbar. This may be difficult to get exactly right, because some users may have set their scrollbars to be wider or smaller than the default. However, with a difference of around 20 to 30 pixels you'll usually be able to display the scrollbar just fine.

Below you can see the code in action. As you can see, the table header stays put on the page, while you can scroll up and down in the table:

Column 1 Column 2
Value 1 Value 2
Value 1 Value 2
Value 1 Value 2
Value 1 Value 2
Value 1 Value 2
Value 1 Value 2
Value 1 Value 2
Value 1 Value 2
Value 1 Value 2
Value 1 Value 2
Value 1 Value 2
Value 1 Value 2
Value 1 Value 2


 

If you want the scrollbars to appear regardless of the size of the inner table, set the overflow to scroll instead of auto.


Where to Next?

Wonder where to go next? You can post a comment on this article.

Doc ID 357
Full URL https://imar.spaanjaars.com/357/a-scrollable-table-with-a-fixed-header
Short cut https://imar.spaanjaars.com/357/
Written by Imar Spaanjaars
Date Posted 02/13/2005 13:35
Date Last Reviewed 05/24/2006 20:36
Listened to when writing Distegration by The Cure (Track 10 from the album: Disintegration)

Comments

Talk Back! Comment on Imar.Spaanjaars.Com

I am interested in what you have to say about this article. Feel free to post any comments, remarks or questions you may have about this article. The Talk Back feature is not meant for technical questions that are not directly related to this article. So, a post like "Hey, can you tell me how I can upload files to a MySQL database in PHP?" is likely to be removed. Also spam and unrealistic job offers will be deleted immediately.

When you post a comment, you have to provide your name and the comment. Your e-mail address is optional and you only need to provide it if you want me to contact you. It will not be displayed along with your comment. I got sick and tired of the comment spam I was receiving, so I have protected this page with a simple calculation exercise. This means that if you want to leave a comment, you'll need to complete the calculation before you hit the Post Comment button.

If you want to object to a comment made by another visitor, be sure to contact me and I'll look into it ASAP. Don't forget to mention the page link, or the Doc ID of the document.

(Plain text only; no HTML or code that looks like HTML or XML. In other words, don't use < and >. Also no links allowed.