Table Fixed header in jquery
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
</script>
<style>
.tbl_wrap{ border-right:1px solid #b1b1b1; border-top:1px solid #b1b1b1; border-bottom:1px solid #b1b1b1;}
.hd_table{border-collapse:collapse; border:0}
.hd_table td{
border:1px solid #b1b1b1; padding:5px}
.hd_table th
{ background: none
repeat scroll 0 0 #000000; border-left: 1px solid #B1B1B1; border-right:
1px solid #B1B1B1; padding: 5px;}
.header_wrap{border-bottom:1px solid #b1b1b1; background:#000000;}
</style>
<script>
function scrolify(tblAsJQueryObject, height) {
var oTbl = tblAsJQueryObject;
// for very large tables you can remove the four
lines below
// and wrap the table with <div> in
the mark-up and assign
// height and overflow property
var oTblDiv = $("<div/>");
oTblDiv.css('height', height);
oTblDiv.css({ 'overflow': 'scroll', 'overflow-x':
'hidden', 'margin-top':'-1px' });
oTbl.wrap(oTblDiv);
// save original width
oTbl.attr("data-item-original-width",
oTbl.width());
oTbl.find('thead tr td').each(function () {
$(this).attr("data-item-original-width",
$(this).width());
});
oTbl.find('tbody tr:eq(0) td').each(function () {
$(this).attr("data-item-original-width",
$(this).width());
});
// clone the original table
var newTbl = oTbl.clone();
// remove table header from original table
oTbl.find('thead tr').remove();
// remove table body from new table
newTbl.find('tbody tr').remove();
oTbl.parent().parent().prepend(newTbl);
newTbl.wrap("<div/>");
newTbl.parent().addClass('header_wrap');
// replace ORIGINAL COLUMN width
newTbl.width(newTbl.attr('data-item-original-width'));
newTbl.find('thead tr td').each(function () {
$(this).width($(this).attr("data-item-original-width"));
});
oTbl.width(oTbl.attr('data-item-original-width'));
oTbl.find('tbody tr:eq(0) td').each(function () {
$(this).width($(this).attr("data-item-original-width"));
});
}
$(document).ready(function () {
scrolify($('#tblScrolling'), 174); // 160 is height
});
</script>
</head>
<body>
<div class="tbl_wrap"
style="width:600px;">
<table class="hd_table"
width="100%"
id="tblScrolling"
cellpadding="0"
cellspacing="0">
<thead>
<tr><th>Header 1</th><th>Header 2</th> <th>Header 1</th><th>Header 2</th></tr>
</thead>
<tbody>
<tr><td>row 1, cell 1</td><td>row 1, cell 2</td> <td>row 1, cell 1</td><td>row 1, cell 2</td></tr>
<tr><td>row 2, cell 1</td><td>row 2, cell 2</td> <td>row 1, cell 1</td><td>row 1, cell 2</td></tr>
<tr><td>row 3, cell 1</td><td>row 3, cell 2</td> <td>row 1, cell 1</td><td>row 1, cell 2</td></tr>
<tr><td>row 4, cell 1</td><td>row 4, cell 2</td> <td>row 1, cell 1</td><td>row 1, cell 2</td></tr>
<tr><td>row 5, cell 1</td><td>row 5, cell 2</td> <td>row 1, cell 1</td><td>row 1, cell 2</td></tr>
<tr><td>row 6, cell 1</td><td>row 6, cell 2</td> <td>row 1, cell 1</td><td>row 1, cell 2</td></tr>
<tr><td>row 7, cell 1</td><td>row 7, cell 2</td> <td>row 1, cell 1</td><td>row 1, cell 2</td></tr>
<tr><td>row 8, cell 1</td><td>row 8, cell 2</td><td>row 1, cell 1</td><td>row 1, cell 2</td></tr>
</tbody>
</table>
</div>
</body>
Example
| Header 1 | Header 2 | Header 1 | Header 2 |
|---|---|---|---|
| row 1, cell 1 | row 1, cell 2 | row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 | row 1, cell 1 | row 1, cell 2 |
| row 3, cell 1 | row 3, cell 2 | row 1, cell 1 | row 1, cell 2 |
| row 4, cell 1 | row 4, cell 2 | row 1, cell 1 | row 1, cell 2 |
| row 5, cell 1 | row 5, cell 2 | row 1, cell 1 | row 1, cell 2 |
| row 6, cell 1 | row 6, cell 2 | row 1, cell 1 | row 1, cell 2 |
| row 7, cell 1 | row 7, cell 2 | row 1, cell 1 | row 1, cell 2 |
| row 8, cell 1 | row 8, cell 2 | row 1, cell 1 | row 1, cell 2 |
Comments