Click here to Skip to main content
Click here to Skip to main content

Scrollable HTML Table

, 6 Sep 2003
Rate this:
Please Sign up or sign in to vote.
Make your HTML tables scrollable with this simple method. No additional coding necessary!
<!-- Download Links --> <!-- Article image -->

Sample Image - Scrollable_Table.jpg

<!-- Add the rest of your HTML here -->

Introduction

This JavaScript code can be used to convert tables in ordinary HTML into scrollable ones. No additional coding is necessary. All you need to do is put header rows in TBODY and give your table an ID field, include the ScrollableTable.js file and call makeScrollableTable in your document's onLoad method.

<html>
<head>
<script language="JavaScript" src=ScrollableTable.js></script>
</head>

<body onload="makeScrollableTable('tabela',true,'auto');">

<table border=0 id=tabela align=center 
  style="border-color: black; border-style: solid; border-width: 1;">
<thead>
<tr>
  <th bgcolor=blue style="color: white" rowspan=2 valign=bottom>ColA</th>
  <th bgcolor=blue style="color: white" colspan=2 align=center>ColBC</th>
  <th bgcolor=blue style="color: white" colspan=2 align=center>ColDE</th>
  <th bgcolor=blue style="color: white" rowspan=2 valign=bottom>ColF</th>
</tr>
<tr>
  <th bgcolor=blue style="color: white">ColB</th>
  <th bgcolor=blue style="color: white">ColC</th>
  <th bgcolor=blue style="color: white">ColD</th>
  <th bgcolor=blue style="color: white">ColE</th>
</tr>
</thead>
<tbody>
<tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td></tr>
<tr>
  <td>A</td>
  <td>BBBBBBBBBBBBBBBBBBBBBBBBB</td>
  <td>C</td>
  <td>D</td>
  <td>E</td>
  <td>F</td>
</tr>
</tbody>
<tfoot>
<tr>
  <td bgcolor=blue style="color: white" colspan=6 align=center>Footer</td>
</tr>
</tfoot>
</table>
</body>
</html>

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Wagner DosAnjos

United States United States
No Biography provided

Comments and Discussions

 
GeneralfixTableWidth Problem Pinmemberchris lasater19-Jan-06 6:15 
QuestionScrollable HTML Table Pinmemberndhai3-Dec-05 5:35 
Generalsome table work on javascript Pinsusssumera nazli14-Oct-05 7:47 
QuestionHow to make horizontal scrolling Pinmembersach_oz9-Sep-05 20:53 
GeneralNo scrollbar in Mozilla and netscape Pinmembermarine_costal5-Jul-05 10:05 
GeneralRe: No scrollbar in Mozilla and netscape PinmemberRohit Joshi23-Feb-07 4:09 
GeneralRe: No scrollbar in Mozilla and netscape PinmemberTerri Layman17-Sep-08 10:09 
GeneralRe: No scrollbar in Mozilla and netscape Pinmemberfrankfry22-Sep-08 3:59 
QuestionRe: No scrollbar in Mozilla and netscape Pinmemberslymenk8-May-09 2:05 
GeneralRe: No scrollbar in Mozilla and netscape Pinmemberslamb824-Mar-10 5:04 
Generalprogram not compiling, stops at thead PinmemberLisaleb15-Jun-05 15:00 
Questionsorting? Pinmemberraforaez7-Jun-05 4:22 
GeneralMozilla Firefox support PinsussAnonymous19-May-05 23:12 
GeneralRe: Mozilla Firefox support PinmemberRohit Joshi23-Feb-07 4:10 
GeneralNo scrollbar in Mozilla Pinmemberclairelw23-Mar-05 0:30 
GeneralRe: No scrollbar in Mozilla PinmemberRohit Joshi23-Feb-07 4:09 
Generalhorizontal scrollbar - solved problem PinmemberBoneripper17-Dec-04 1:05 
GeneralRe: horizontal scrollbar - solved problem PinsussAnonymous20-May-05 0:28 
GeneralPage Resizing Pinmemberkitana_q12-Oct-04 8:13 
GeneralUsing images in table body PinmemberPeter Black16-Sep-04 6:22 
GeneralRe: Using images in table body PinmemberPeter Black16-Sep-04 6:48 
Generalscrollable table with fixed top header and left header Pinmemberamitas12-Apr-04 1:24 
Generalhi Pinmemberhongwl94@hotmail.com17-Mar-04 14:56 
GeneralVertical scroll only Pinmemberaksoo23-Nov-03 22:28 
GeneralRe: Vertical scroll only PinsussAnonymous16-May-04 23:46 
GeneralRe: Vertical scroll only Pinmemberndhai3-Dec-05 6:26 
Questionhow does one print just that table? PinsussAnonymous12-Nov-03 20:39 
AnswerRe: how does one print just that table? PinmembermikeAgent26-May-04 9:16 
GeneralColumn headers not aligned with table Pinmembera_soong11-Nov-03 14:05 
GeneralRe: Column headers not aligned with table Pinmembera_soong11-Nov-03 14:15 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.141015.1 | Last Updated 7 Sep 2003
Article Copyright 2002 by Wagner DosAnjos
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid