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.
<table border="1"> <tr><td> </td><td>Boston</td><td>Chicago </td><td>Dallas </td><td>Denver </td><td>Fargo </td><td>Houston</td><td>Memphis</td><td>Miami</td><td>Phoenix</td><td>Reno</td> <td>Raleigh</td> <td>Seattle</td><td>Wichita</td></tr> <tr><td>Boston </td><td> </td><td>983 </td><td>1764 </td><td>1970 </td><td>1629 </td><td>1844 </td><td>1312 </td><td>1482 </td><td>2681 </td><td>2881 </td><td>702 </td><td>3054 </td><td>1613 </td></tr> <tr><td>Chicago </td><td>983 </td><td> </td><td>926 </td><td>1002 </td><td>641 </td><td>1085 </td><td>531 </td><td>1381 </td><td>1794 </td><td>1913 </td><td>912 </td><td>2063 </td><td>724 </td></tr> <tr><td>Dallas </td><td>1764 </td><td>926 </td><td> </td><td>880 </td><td>1079 </td><td>228 </td><td>453 </td><td>1307 </td><td>1066 </td><td>1668 </td><td>1191 </td><td>2193 </td><td>361 </td></tr> <tr><td>Denver </td><td>1970 </td><td>1002 </td><td>880 </td><td> </td><td>873 </td><td>1097 </td><td>22069 </td><td>2069 </td><td>908 </td><td>1051 </td><td>1678 </td><td>1320 </td><td>519 </td></tr> <tr><td>Fargo </td><td>1629 </td><td>641 </td><td>1079 </td><td>873 </td><td> </td><td>1321 </td><td>1054 </td><td>2025 </td><td>1780 </td><td>1564 </td><td>1460 </td><td>1424 </td><td>685 </td></tr> <tr><td>Houston </td><td>1844 </td><td>1085 </td><td>228 </td><td>1035 </td><td>1321 </td><td> </td><td>575 </td><td>1186 </td><td>1178 </td><td>1904 </td><td>1202 </td><td>2431 </td><td>595 </td></tr> <tr><td>Memphis </td><td>1312 </td><td>531 </td><td>453 </td><td>1097 </td><td>1054 </td><td>575 </td><td> </td><td>1012 </td><td>1471 </td><td>2029 </td><td>753 </td><td>2299 </td><td>577 </td></tr> <tr><td>Miami </td><td>1482 </td><td>1381 </td><td>1307 </td><td>2069 </td><td>2025 </td><td>1186 </td><td>1012 </td><td> </td><td>2362 </td><td>3063 </td><td>797 </td><td>3315 </td><td>1587 </td></tr> <tr><td>Phoenix </td><td>2681 </td><td>1794 </td><td>1066 </td><td>908 </td><td>1780 </td><td>1178 </td><td>1471 </td><td>2362 </td><td> </td><td>733 </td><td>2224 </td><td>1414 </td><td>1053 </td></tr> <tr><td>Reno </td><td>2881 </td><td>1913 </td><td>1668 </td><td>1051 </td><td>1564 </td><td>1904 </td><td>2029 </td><td>3063 </td><td>733 </td><td> </td><td>2690 </td><td>720 </td><td>1558 </td></tr> <tr><td>Raleigh </td><td>702 </td><td>912 </td><td>1191 </td><td>1678 </td><td>1460 </td><td>1202 </td><td>753 </td><td>797 </td><td>2224 </td><td>2690 </td><td> </td><td>2885 </td><td>1227 </td></tr> <tr><td>Seattle </td><td>3054 </td><td>2063 </td><td>2193 </td><td>1320 </td><td>1424 </td><td>2431 </td><td>2299 </td><td>3315 </td><td>1414 </td><td>720 </td><td>2885 </td><td> </td><td>1828 </td></tr> <tr><td>Wichita </td><td>1613 </td><td>724 </td><td>361 </td><td>519 </td><td>685 </td><td>595 </td><td>577 </td><td>1587 </td><td>1053 </td><td>1558 </td><td>1227 </td><td>1828 </td><td> </td></tr> </table>
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.
<div style="width:400px; height:300px; border-style:solid; border-width:1px; overflow:auto;"> ... table html ... </div>
The result is the scrolling table shown below.
| Boston | Chicago | Dallas | Denver | Fargo | Houston | Memphis | Miami | Phoenix | Reno | Raleigh | Seattle | Wichita | |
| Boston | 983 | 1764 | 1970 | 1629 | 1844 | 1312 | 1482 | 2681 | 2881 | 702 | 3054 | 1613 | |
| Chicago | 983 | 926 | 1002 | 641 | 1085 | 531 | 1381 | 1794 | 1913 | 912 | 2063 | 724 | |
| Dallas | 1764 | 926 | 880 | 1079 | 228 | 453 | 1307 | 1066 | 1668 | 1191 | 2193 | 361 | |
| Denver | 1970 | 1002 | 880 | 873 | 1097 | 22069 | 2069 | 908 | 1051 | 1678 | 1320 | 519 | |
| Fargo | 1629 | 641 | 1079 | 873 | 1321 | 1054 | 2025 | 1780 | 1564 | 1460 | 1424 | 685 | |
| Houston | 1844 | 1085 | 228 | 1035 | 1321 | 575 | 1186 | 1178 | 1904 | 1202 | 2431 | 595 | |
| Memphis | 1312 | 531 | 453 | 1097 | 1054 | 575 | 1012 | 1471 | 2029 | 753 | 2299 | 577 | |
| Miami | 1482 | 1381 | 1307 | 2069 | 2025 | 1186 | 1012 | 2362 | 3063 | 797 | 3315 | 1587 | |
| Phoenix | 2681 | 1794 | 1066 | 908 | 1780 | 1178 | 1471 | 2362 | 733 | 2224 | 1414 | 1053 | |
| Reno | 2881 | 1913 | 1668 | 1051 | 1564 | 1904 | 2029 | 3063 | 733 | 2690 | 720 | 1558 | |
| Raleigh | 702 | 912 | 1191 | 1678 | 1460 | 1202 | 753 | 797 | 2224 | 2690 | 2885 | 1227 | |
| Seattle | 3054 | 2063 | 2193 | 1320 | 1424 | 2431 | 2299 | 3315 | 1414 | 720 | 2885 | 1828 | |
| Wichita | 1613 | 724 | 361 | 519 | 685 | 595 | 577 | 1587 | 1053 | 1558 | 1227 | 1828 |
Note: in the divs inline style you would set the value of the width and height properties to the desired dimensions for your scrolling table.
You'll notice a problem with this table, as you scroll down in the table, the names of the destination cities scrolls out of view. Shown below is a similar table where the names of the destination cities do not scroll out of view.
| Boston | Chicago | Dallas | Denver | Fargo | Houston |
| Boston | 983 | 1764 | 1970 | 1629 | 1844 | |
| Chicago | 983 | 926 | 1002 | 641 | 1085 | |
| Dallas | 1764 | 926 | 880 | 1079 | 228 | |
| Denver | 1970 | 1002 | 880 | 873 | 1097 | |
| Fargo | 1629 | 641 | 1079 | 873 | 1321 | |
| Houston | 1844 | 1085 | 228 | 1035 | 1321 | |
| Memphis | 1312 | 531 | 453 | 1097 | 1054 | 575 |
| Miami | 1482 | 1381 | 1307 | 2069 | 2025 | 1186 |
| Phoenix | 2681 | 1794 | 1066 | 908 | 1780 | 1178 |
| Reno | 2881 | 1913 | 1668 | 1051 | 1564 | 1904 |
| Raleigh | 702 | 912 | 1191 | 1678 | 1460 | 1202 |
| Seattle | 3054 | 2063 | 2193 | 1320 | 1424 | 2431 |
| Wichita | 1613 | 724 | 361 | 519 | 685 | 595 |
This was accomplished by simply placing another table containing the names of the destination cities immediately above the div containing the main table. The code for this is shown below.
<style type="text/css">
.scrolling td
{
width:60px;
}
</style>
<table class="scrolling" border="1">
<tr><td> </td><td>Boston</td><td>Chicago </td><td>Dallas </td><td>Denver </td><td>Fargo </td><td>Houston</td></tr>
</td></tr>
</table>
<div style="width:482px; height:190px; border-style:solid; border-width:1px; overflow:auto;">
<table class="scrolling" border="1">
<tr><td>Boston </td><td> </td><td>983 </td><td>1764 </td><td>1970 </td><td>1629 </td><td>1844 </td></tr>
<tr><td>Chicago </td><td>983 </td><td> </td><td>926 </td><td>1002 </td><td>641 </td><td>1085 </td></tr>
<tr><td>Dallas </td><td>1764 </td><td>926 </td><td> </td><td>880 </td><td>1079 </td><td>228 </td></tr>
<tr><td>Denver </td><td>1970 </td><td>1002 </td><td>880 </td><td> </td><td>873 </td><td>1097 </td></tr>
<tr><td>Fargo </td><td>1629 </td><td>641 </td><td>1079 </td><td>873 </td><td> </td><td>1321 </td></tr>
<tr><td>Houston </td><td>1844 </td><td>1085 </td><td>228 </td><td>1035 </td><td>1321 </td><td> </td></tr>
<tr><td>Memphis </td><td>1312 </td><td>531 </td><td>453 </td><td>1097 </td><td>1054 </td><td>575 </td></tr>
<tr><td>Miami </td><td>1482 </td><td>1381 </td><td>1307 </td><td>2069 </td><td>2025 </td><td>1186 </td></tr>
<tr><td>Phoenix </td><td>2681 </td><td>1794 </td><td>1066 </td><td>908 </td><td>1780 </td><td>1178 </td></tr>
<tr><td>Reno </td><td>2881 </td><td>1913 </td><td>1668 </td><td>1051 </td><td>1564 </td><td>1904 </td></tr>
<tr><td>Raleigh </td><td>702 </td><td>912 </td><td>1191 </td><td>1678 </td><td>1460 </td><td>1202 </td></tr>
<tr><td>Seattle </td><td>3054 </td><td>2063 </td><td>2193 </td><td>1320 </td><td>1424 </td><td>2431 </td></tr>
<tr><td>Wichita </td><td>1613 </td><td>724 </td><td>361 </td><td>519 </td><td>685 </td><td>595 </td></tr>
</table>
</div>
Note that I sneaked in a bit of style code in a style code block above the tables. In the opening table tags I declared them to be of class scrolling and then I defined and td descendants of class scrolling to have a width of 60 pixels. Since this is basically an html coding article, I don't want to bog you down with CSS. This style code simply makes the width of all the table cells the same. You would set the value of the width to the desired dimension for your table.
I think this table of the mileage between various cities would be more user-friendly if the depart cities remained stationary while the table of destinations scrolled horizontally. Show below is such a table.
| Boston |
| Chicago |
| Dallas |
| Denver |
| Fargo |
| Houston |
| Memphis |
| Miami |
| Phoenix |
| Boston | Chicago | Dallas | Denver | Fargo | Houston | Memphis | Miami | Phoenix | Reno | Raleigh | Seattle | Wichita |
| 983 | 1764 | 1970 | 1629 | 1844 | 1312 | 1482 | 2681 | 2881 | 702 | 3054 | 1613 | |
| 983 | 926 | 1002 | 641 | 1085 | 531 | 1381 | 1794 | 1913 | 912 | 2063 | 724 | |
| 1764 | 926 | 880 | 1079 | 228 | 453 | 1307 | 1066 | 1668 | 1191 | 2193 | 361 | |
| 1970 | 1002 | 880 | 873 | 1097 | 22069 | 2069 | 908 | 1051 | 1678 | 1320 | 519 | |
| 1629 | 641 | 1079 | 873 | 1321 | 1054 | 2025 | 1780 | 1564 | 1460 | 1424 | 685 | |
| 1844 | 1085 | 228 | 1035 | 1321 | 575 | 1186 | 1178 | 1904 | 1202 | 2431 | 595 | |
| 1312 | 531 | 453 | 1097 | 1054 | 575 | 1012 | 1471 | 2029 | 753 | 2299 | 577 | |
| 1482 | 1381 | 1307 | 2069 | 2025 | 1186 | 1012 | 2362 | 3063 | 797 | 3315 | 1587 | |
| 2681 | 1794 | 1066 | 908 | 1780 | 1178 | 1471 | 2362 | 733 | 2224 | 1414 | 1053 |
This was accomplished by placing the names of the depart cities in another table. But, as you might know tables and divs are block elements. This means they contain an embedded carriage return before and after. So note in the inlne style code for both tables that I have redefined them to be inline elements (in other words they flow onto the webpage like text) and I have set them to float to the left side of the webpage. The code for this is shown below.
<table border="1" style="display:inline; float:left;"> <tr><td> </td></tr> <tr><td>Boston </td></tr> <tr><td>Chicago </td></tr> <tr><td>Dallas </td></tr> <tr><td>Denver </td></tr> <tr><td>Fargo </td></tr> <tr><td>Houston </td></tr> <tr><td>Memphis </td></tr> <tr><td>Miami </td></tr> <tr><td>Phoenix </td></tr> </table> <div style="display:inline; float:left; width:400px; height:282px; border-style:solid; border-width:1px; overflow:auto;"> <table border="1"> <tr><td>Boston</td><td>Chicago </td><td>Dallas </td><td>Denver </td><td>Fargo </td><td>Houston</td><td>Memphis</td><td>Miami</td><td>Phoenix</td><td>Reno</td> <td>Raleigh</td> <td>Seattle</td><td>Wichita</td></tr> <tr><td> </td><td>983 </td><td>1764 </td><td>1970 </td><td>1629 </td><td>1844 </td><td>1312 </td><td>1482 </td><td>2681 </td><td>2881 </td><td>702 </td><td>3054 </td><td>1613 </td></tr> <tr><td>983 </td><td> </td><td>926 </td><td>1002 </td><td>641 </td><td>1085 </td><td>531 </td><td>1381 </td><td>1794 </td><td>1913 </td><td>912 </td><td>2063 </td><td>724 </td></tr> <tr><td>1764 </td><td>926 </td><td> </td><td>880 </td><td>1079 </td><td>228 </td><td>453 </td><td>1307 </td><td>1066 </td><td>1668 </td><td>1191 </td><td>2193 </td><td>361 </td></tr> <tr><td>1970 </td><td>1002 </td><td>880 </td><td> </td><td>873 </td><td>1097 </td><td>22069 </td><td>2069 </td><td>908 </td><td>1051 </td><td>1678 </td><td>1320 </td><td>519 </td></tr> <tr><td>1629 </td><td>641 </td><td>1079 </td><td>873 </td><td> </td><td>1321 </td><td>1054 </td><td>2025 </td><td>1780 </td><td>1564 </td><td>1460 </td><td>1424 </td><td>685 </td></tr> <tr><td>1844 </td><td>1085 </td><td>228 </td><td>1035 </td><td>1321 </td><td> </td><td>575 </td><td>1186 </td><td>1178 </td><td>1904 </td><td>1202 </td><td>2431 </td><td>595 </td></tr> <tr><td>1312 </td><td>531 </td><td>453 </td><td>1097 </td><td>1054 </td><td>575 </td><td> </td><td>1012 </td><td>1471 </td><td>2029 </td><td>753 </td><td>2299 </td><td>577 </td></tr> <tr><td>1482 </td><td>1381 </td><td>1307 </td><td>2069 </td><td>2025 </td><td>1186 </td><td>1012 </td><td> </td><td>2362 </td><td>3063 </td><td>797 </td><td>3315 </td><td>1587 </td></tr> <tr><td>2681 </td><td>1794 </td><td>1066 </td><td>908 </td><td>1780 </td><td>1178 </td><td>1471 </td><td>2362 </td><td> </td><td>733 </td><td>2224 </td><td>1414 </td><td>1053 </td></tr> </table> </div> <br clear="all" />
Note that last tag <br clear="all" />. You need this to clear the float:left property. Otherwise the browser will continue to place inline text and other inline webpage elements to the right of your floated div.
| Boston | Chicago | Dallas | Denver | Fargo | Houston |
| Boston | 983 | 1764 | 1970 | 1629 | 1844 | |
| Chicago | 983 | 926 | 1002 | 641 | 1085 | |
| Dallas | 1764 | 926 | 880 | 1079 | 228 | |
| Denver | 1970 | 1002 | 880 | 873 | 1097 | |
| Fargo | 1629 | 641 | 1079 | 873 | 1321 | |
| Houston | 1844 | 1085 | 228 | 1035 | 1321 | |
| Memphis | 1312 | 531 | 453 | 1097 | 1054 | 575 |
| Miami | 1482 | 1381 | 1307 | 2069 | 2025 | 1186 |
| Phoenix | 2681 | 1794 | 1066 | 908 | 1780 | 1178 |
| Reno | 2881 | 1913 | 1668 | 1051 | 1564 | 1904 |
| Raleigh | 702 | 912 | 1191 | 1678 | 1460 | 1202 |
| Seattle | 3054 | 2063 | 2193 | 1320 | 1424 | 2431 |
| Wichita | 1613 | 724 | 361 | 519 | 685 | 595 |
As I stated earlier, this is basically an html coding article, so I don't want to bog you down with CSS. But the example shown above gives you an idea of some of the things you can do with a table using CSS.
More HTML Code:
• HTML center Tag
• HTML Image Basics
• When to Use the nofollow Attribute value
• XHTML Basics
• Easy Code to Add Google Site Search to Your Website
• HTML Bulleted or Unordered List
• Web Page Template
• HTML Numbered or Ordered List
• Providing Alternate and Title Text for an Image
• HTML5 Input Type - URL