Scrollable Table with Fixed Header
Oct 26 2009
Here is a solution for fixed table header for tables using jQuery plugin.The following code requires the header rows, with in a thead tag, the table body in a tbody tag.
Follow below 5 steps to create a fixed header row of a normal HTML table.
Step 1:
Include the jQuery JavaScript file on header section of web page.
Step 2:
Include the Fixed Header jQuery file on header section of web page.
Download jquery.fixedheader.js
Step 3:
Copy and paste this CSS code in stylesheet or header section of web page.
<style type="text/css">
.dataTable {
font-family:Verdana, Arial, Helvetica, sans-serif;
border-collapse: collapse;
border:1px solid #999999;
width: 750px;
font-size:12px;
}
.dataTable td, .dataTable th {
border: 1px solid #999999;
padding: 3px 5px;
margin:0px;
}
.dataTable thead th {
background-color:#cccccc;
color:#444444;
font-weight:bold;
text-align:left;
}
.dataTable thead a {
text-decoration:none;
color:#444444;
}
.dataTable thead a:hover { text-decoration: underline;}
/* Firefox has missing border bug! https://bugzilla.mozilla.org/show_bug.cgi?id=410621 */
/* Firefox 2 */
html</**/body .dataTable, x:-moz-any-link {margin:1px;}
/* Firefox 3 */
html</**/body .dataTable, x:-moz-any-link, x:default {margin:1px}
</style>
Step 4:
Add this JavaScript code in header section of web page.
<script type="text/javascript">
$(document).ready(function(){
$("#data").fixedHeader({width: 500,height: 300});
})
</script>
Step 5:
Create an HTML table on the page, including THEAD and TBODY sections.
<table id="data" class="dataTable"> <thead> <tr> <th> ….. <\th> <th> ….. <\th> </tr> </thead> <tbody> <tr> <td> ….. <\td> <td> ….. <\td> </tr> </tbody> </table>
Compatibility
IE6/7, Firefox 3.0/3.1, Opera 9.5, Chrome 0.2, Safari 3.1.2
Posted in: Jquery : Tips & Tricks


















