SiteExperts.com Logo Home | Community | Developer's Paradise | Jobs
User Groups | Site Tools | Site Information | Search

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:

Web Site Inside Dynamic HTML This Web Site!
Web Site DHTML Lab DHTML tutorials with emphasis on cross-browser and backward compatibility.
Web Site DHTML Demos Simple modular DHTML scripts with commented code and links to other web resources.
Reference Microsoft IE4 SDK D-HTML Reference for IE4
Web Site DHTMLZone Macromedia's Site for Cross-Browser DHTML Development
Web Site Project Cool An ongoing set of DHTML tutorials that are a work in progress.
Link Index All-Links Links to examples and documentation of DHTML.
Web Site ActiveIE IE4 News, tips, and news groups
Web Site CAB, Inc. Examples and articles on Microsoft Web Technologies.
Web Site Web Coder DHTML and JavaScript techniques.
Web Site Webmonkey Build the Web. HotWired's site for Webmonkey's everywhere.
Web Site DHTML Guru A free resource covering the art of building cross-browser D-HTML.
Web Site IE4 Globe Covers Internet Explorer 4.0 technologies
Web Site Explore with IE4 Tech Web's IE4 News, Tutorials, and More
Web Site MS Site Builders Microsoft's Dynamic HTML area on Site Builders.
Web Site Browser Wars Compuserves new web-site covering the latest browsers.
Web Site ECMA-262 The JScript/ JavaScript Language Standard.
Web Site IE4.0 Beta Zone ZDNet's Internet Explorer 4.0 Beta Zone
Web Site DHTML Dude Monthly Microsoft article on Dynamic HTML.

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.

Discuss and Rate this Article