Inside Technique : Creating Scrollable Tables
By Scott Isaacs

This article explores creating a scrollable table for Internet Explorer 4.0 without requiring script. You can only create this scrollable table in Internet Explorer 4.0. For non-IE4 users, a traditional static table is displayed.

Internet Exploror 4.0 supports the CSS overflow property for creating scrollable regions in your document. This property is currently only supported on DIV and SPAN elements that have a width or height defined and cannot be used within a table for forcing a table to scroll. Therefore, creating a scrollable table is more an art that requires careful manipulation of HTML and CSS.

The contents in the table below are scrollable if you are using Internet Explorer 4.0, The header row stays static above the scrollbars. If you were to view the source for this page, you will notice this table is actually composed of two tables - one for the header row and a second for the actual contents:

To line up the tables, we defined a width on each column using the HTML 4.0 <COL> element. In addition, since only Internet Explorer 4.0 currently provides support for the HTML 4.0 table enhancements, we defined the same width on the columns in the first row of the table. This duplicate definition is only an attempt for browsers other than Internet Explorer 4.0 to line up the header with the contents. Below shows how we defined the header for the table:

<TABLE cellspacing=0 cellpadding=2 id=header>
  <COL WIDTH=100><COL WIDTH=150><COL WIDTH=200>
    <tr>
      <th width=100 bgcolor="lightgrey">Category</th>
      <th width=150 bgcolor="lightgrey">Name</th>
      <th width=200 bgcolor="lightgrey">Description</th>
    </tr>
</TABLE>

The table that makes up the contents are surrounded by a DIV element. This DIV element has a fixed width that is 25 pixels greater than the width of the table. The extra pixels are to make room for the scrollbar. To clean-up the appearance, we added a border to the bottom and left side of the DIV. The DIV and the first row of the table are defined as follows:

<DIV STYLE="overflow: auto; width: 480px; height: 300; 
            border-left: 1px gray solid; border-bottom: 1px gray solid; 
            padding:0px; margin: 0px">
<TABLE cellspacing=0 cellpadding=2>
  <COL WIDTH=100><COL WIDTH=150><COL WIDTH=200>
    <tr>
      <td width=100 valign="top" nowrap>
        Web Site 
      </td>
      <td width=150 valign="top">
        <a href="http://www.insideDHTML.com">Inside Dynamic HTML</a>
      </td>
        <td width=200 valign="top">
          This Web Site!
        </td>
      </tr>
  ....
</TABLE>

While this approach appears simple enough, there are a number of caveats you need to look out for. When defining the table with the contents, the widths must be made the same as the widths used in the header. If any of the widths are set smaller than the width of a word in any cell, the tables will not line up. If this occurs, increase the width of the cell. Since the scrollbar width may vary on different machines, the extra space set aside for the scrollbars may not be enough. If you notice that the scrollbar is taking up space from the table, the width of the DIV needs to be increased.

This article explores one approach that we have been successful with. If you have an alternative approach, please tell us about it in our discussion forums.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.