Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Holiday Gift Guide
Holiday Gift Guide

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>

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

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.

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2017 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268