How to Make a Table Scroll

It's very common for a table to contain more data than can be displayed on a webpage without
scrolling the webpage. However many webpages are designed to have a static width and a maximum
length. A large table would be much easier to deal with if the table contents itself could scroll, rather
than having to scroll the entire webpage. In this article, I'll show you exactly how to accomplish that.

As you may already know, an html table is constructed of <tr> (table row) and <td>
(table data (actually table cell or table column) elements. The intent of the <th>, <thead>,
<tbody>, and <tfoot> elements was to allow the creation of a table where the contents
of the table could scroll while the table's header and footer remained in place. Unfortunately, as of
this writing, neither of the popular browsers (Internet Explorer and Firefox) supports this feature.

I've seen some designers use CSS (Cascading Style Sheets) to allow a table to scroll, at least I
think I have, because their examples involved bucket-loads of code and it's very difficult to see what
they're doing. Complexity causes bugs and slow-loading webpages. So basically, you can't make a
table scroll (with today's popular browsers) even with CSS. However, you CAN use CSS to make
a div scroll, and you can nest a table in a div. That's what we'll do here.

Shown below is the code for the table that we'll use for this example. It's a table of the mileage
between various cities.

This table would be too wide to display on most webpages, and you might not want to give up this
much vertical space on your webpage. So we nest the table in a div by pasting the opening div tag
immediately above the table code, and the closing div tag immediately below the table code as shown below.