Scrolling Table Body Test

This page demonstrates the use of CSS2 to specify a table body that scrolls independently of the table's head. Such a technique is especially useful for long tables where the table head would normally disappear as the user scrolls down the page to see the entire table.

This page is based on a real live table. The only change to the HTML other than replacing the page's main heading and introductory paragraphs was to add a STYLE element with the following two rulesets:

tbody { overflow: auto; height: 150px }
tbody tr { height: 1em } /* work around IE bug */

The second ruleset is only necessary to work around a bug in Microsoft Internet Explorer, which (in versions 5.5 and 6.0 for Windows) would otherwise apply the 150px height to each table row. Thanks to Brian Hirt for suggesting this workaround.

To see the effect of the scrolling table body, you will need to use a browser such as Mozilla. Other browsers that don't support scrolling table bodies will show the page normally, as if the style were never specified.