Menu
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.

<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.

BostonChicago Dallas Denver Fargo HoustonMemphisMiamiPhoenixReno Raleigh SeattleWichita
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.

  BostonChicago 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
BostonChicago Dallas Denver Fargo HoustonMemphisMiamiPhoenixReno Raleigh SeattleWichita
  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.

  BostonChicago 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.


Learn more at amazon.com

More HTML Code:
• Text Input Box Basics
• HTML Blockquote Basics
• HTML Definition List
• Set Form Controls Tab Order With tabindex Attribute
• Providing Alternate and Title Text for an Image
• Block and Inline HTML Elements
• HTML DIV Basics
• Easy Code to Add Google Site Search to Your Website
• HTML Select List Basics
• Text Features