In this article I will explain with an example how to make Scrollable Table in HTML with Fixed Header using jQuery and jQuery Scrollable Table Plugin.
The HTML Table Header will be made fixed using the free ASPSnippets jQuery Scrollable Table Plugin.
Scrollable Table jQuery Plugin
The plugin can be downloaded using the following download link.
HTML Markup
The HTML Markup consists of an HTML Table.
<table cellspacing="0" rules="all" border="1" id="Table1" style="border-collapse: collapse;">
<tr>
<th>Contact Name</th>
<th>City</th>
<th>Country</th>
</tr>
<tr>
<td>Maria</td>
<td>Berlin</td>
<td>Germany</td>
</tr>
<tr>
<td>Ana Trujillo</td>
<td>México D.F.</td>
<td>Mexico</td>
</tr>
<tr>
<td>Antonio Moreno</td>
<td>México D.F.</td>
<td>Mexico</td>
</tr>
<tr>
<td>Thomas Hardy</td>
<td>London</td>
<td>Sweden</td>
</tr>
<tr>
<td>Christina Berglund</td>
<td>Luleå</td>
<td>Sweden</td>
</tr>
<tr>
<td>Hanna Moos</td>
<td>Mannheim</td>
<td>Germany</td>
</tr>
<tr>
<td>Frédérique Citeaux</td>
<td>Strasbourg</td>
<td>France</td>
</tr>
<tr>
<td>Martín Sommer</td>
<td>Madrid</td>
<td>Spain</td>
</tr>
<tr>
<td>Laurence Lebihan</td>
<td>Marseille</td>
<td>France</td>
</tr>
<tr>
<td>Elizabeth Lincoln</td>
<td>Tsawassen</td>
<td>Canada</td>
</tr>
<tr>
<td>Victoria Ashworth</td>
<td>London</td>
<td>UK</td>
</tr>
<tr>
<td>Patricio Simpson</td>
<td>Buenos Aires</td>
<td>Argentina</td>
</tr>
<tr>
<td>Francisco Chang</td>
<td>México D.F.</td>
<td>Mexico</td>
</tr>
<tr>
<td>Yang Wang</td>
<td>Bern</td>
<td>Switzerland</td>
</tr>
<tr>
<td>Pedro Afonso</td>
<td>Sao Paulo</td>
<td>Brazil</td>
</tr>
<tr>
<td>Elizabeth Brown</td>
<td>London</td>
<td>UK</td>
</tr>
</table>
Applying the Scrollable Table jQuery Plugin
You will need to reference jQuery and the Scrollable Table plugin JS files. Then inside the jQuery document ready event handler, you need to apply the Scrollable Table plugin to the HTML Table.
The plugin accepts the following parameters.
ScrollHeight – Height of the Scrollable DIV.
Width – Width of the Scrollable DIV (Optional). It will be useful when you have large number of columns.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="Scripts/ScrollableTablePlugin_1.0_min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#Table1').Scrollable({
ScrollHeight: 100
});
});
</script>
Screenshot
![Make Scrollable Table in HTML with Fixed Header using jQuery]()
Handling External CSS issues
When an external CSS is applied to the Table, you need to make sure that same CSS styles are applied to both Header and Row cells.
For example, consider the following CSS, it has padding for Header Cells but not for the Row Cells.
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
table
{
border: 1px solid #ccc;
border-collapse: collapse;
}
table th
{
background-color: #F7F7F7;
color: #333;
font-weight: normal;
padding:0 10px 0 10px;
}
table th, table td
{
border: 1px solid #ccc;
}
</style>
This results in following.
![Make Scrollable Table in HTML with Fixed Header using jQuery]()
Now consider the following CSS it has padding to both Header and Row cells.
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
table
{
border: 1px solid #ccc;
border-collapse: collapse;
}
table th
{
background-color: #F7F7F7;
color: #333;
font-weight: normal;
}
table th, table td
{
border: 1px solid #ccc;
padding: 0 10px 0 10px;
}
</style>
Now the alignment of Header and Row cells is proper.
![Make Scrollable Table in HTML with Fixed Header using jQuery]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
