Just came across and find out this useful script below.
http://fixed-header-using-jquery.blogspot.com/2009/05/scrollable-table-with-fixed-header-and.html
Thanks Pavan for the code sharing.
I like this one better than the one from JQuery. It doesn't need to require a lot of DOM manipulation, although we need to have the table html setup correctly. However, when playing the script and I found out that it doesn't satisfy my requirement because I need more than one fix columns. So I was playing around and come up with this version which allows multiple fixed columns.
Moreover, there are some bugs. The rows are not matched when scrolling and the row size are not matched when the fixed rows on left hand side have larger size than the right hand side.
I also optimized the script and make the table html into a more easier managed structure so that it is more easier to generated with data. And now the width and height of the table can be 100% too.
<html>
<head>
<script type="text/javascript" src="resources/js/jquery-1.4.2.js"></script>
<script>
$(document).ready(function(){
fnAdjustTable();
});
fnAdjustTable = function(){
var colCount = $('#firstTr>td').length; //get total number of column
var tableColumnCount = $('#fixTr>td').length;
var fxHeaders = $('#fixHeader>td')
var fixColCount = fxHeaders.length;
var m = 0;
var n = 0;
var nn=0;
var brow = 'mozilla';
jQuery.each(jQuery.browser, function(i, val) {
if(val == true){
brow = i.toString();
}
});
$('#firstcol>table tr ').each(function(i){
var height1 = $(this).outerHeight();
var height2 = $('#table_div td:eq('+colCount*n+')').outerHeight();
if (height1 != height2)
{
$(this).css('height',height2);
}
n++;
});
$('#table_div>table tr ').each(function(i){
var height1 = $(this).outerHeight();
var height2 = $('#firstcol td:eq('+tableColumnCount*nn+')').outerHeight();
if (height1 != height2)
{
$(this).css('height',height2);
}
nn++;
});
$('#divHeader').css('width',($('#divHeader').parent().width() - 17)+"px");
$('#table_div').css('width',($('#divHeader').parent().width())+"px");
$('#table_div').css('height',($('#divHeader').parent().height() - $('#divHeader').height())+"px");
$('#firstcol').css('height',($('#divHeader').parent().height() - $('#divHeader').height()-19 )+"px")
}
//function to support scrolling of title and first column
fnScroll = function(){
$('#divHeader').scrollLeft($('#table_div').scrollLeft());
$('#firstcol').scrollTop($('#table_div').scrollTop());
}
</script>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="10" width="100%" height="80%">
<tr>
<td valign="top" width="500">
<table width="100%" cellspacing="0" cellpadding="0" border="1" >
<colgroup width="20%"></colgroup>
<colgroup width="20%"></colgroup>
<colgroup width="*"></colgroup>
<tr id="fixHeader">
<td >asdf
</td>
<td >aaaaa
</td>
<td >bbbb
</td>
</tr>
</table>
<div id="firstcol" style="overflow: hidden;height:500">
<table width="100%" cellspacing="0" cellpadding="0" border="1" >
<colgroup width="20%"></colgroup>
<colgroup width="20%"></colgroup>
<colgroup width="*"></colgroup>
<tr id="fixTr">
<td class="tableFirstCol">First Col row1 </td>
<td class="tableFirstCol">First Col2 row1 </td>
<td class="tableFirstCol">First Col3 row1 </td>
</tr>
<tr>
<td class="tableFirstCol">First Col row1<br>asdfasdfsadf<br>asdfasdfsadf<br>asdfasdfsadf<br>asdfasdfsadf </td>
<td class="tableFirstCol">First Col2 row2 </td>
<td class="tableFirstCol"> </td>
</tr>
<tr>
<td class="tableFirstCol">First Col row3</td>
<td class="tableFirstCol">First Col2 row3 </td>
<td class="tableFirstCol"> </td>
</tr>
<tr>
<td class="tableFirstCol">First Col row4</td>
<td class="tableFirstCol">First Col2 row4 </td>
<td class="tableFirstCol"> </td>
</tr>
<tr>
<td class="tableFirstCol">First Col row5</td>
<td class="tableFirstCol">First Col2 row5 </td>
<td class="tableFirstCol"> </td>
</tr>
<tr>
<td class="tableFirstCol">First Col row6</td>
<td class="tableFirstCol">First Col2 row6 </td>
<td class="tableFirstCol"> </td>
</tr>
<tr>
<td class="tableFirstCol">First Col row7</td>
<td class="tableFirstCol">First Col2 row7 </td>
<td class="tableFirstCol"> </td>
</tr>
<tr>
<td class="tableFirstCol">First Col row6</td>
<td class="tableFirstCol">First Col2 row6 </td>
<td class="tableFirstCol"> </td>
</tr>
<tr>
<td class="tableFirstCol">First Col row7</td>
<td class="tableFirstCol">First Col2 row7 </td>
<td class="tableFirstCol"> </td>
</tr>
<tr>
<td class="tableFirstCol">First Col row6</td>
<td class="tableFirstCol">First Col2 row6 </td>
<td class="tableFirstCol"> </td>
</tr>
<tr>
<td class="tableFirstCol">First Col row7</td>
<td class="tableFirstCol">First Col2 row7 </td>
<td class="tableFirstCol"> </td>
</tr>
<tr>
<td class="tableFirstCol">First Col row6</td>
<td class="tableFirstCol">First Col2 row6 </td>
<td class="tableFirstCol"> </td>
</tr>
<tr>
<td class="tableFirstCol">First Col row7</td>
<td class="tableFirstCol">First Col2 row7 </td>
<td class="tableFirstCol"> </td>
</tr>
</table>
</div>
</td>
<td valign="top" width="*">
<div id="divHeader" style="position:relative;overflow:hidden;width:500">
<table width="2000px" cellspacing="0" cellpadding="0" border="1" >
<colgroup width="100"></colgroup>
<colgroup width="*"></colgroup>
<colgroup width="100"></colgroup>
<colgroup width="100"></colgroup>
<colgroup width="*"></colgroup>
<tr>
<td>
<div class="tableHeader">Title1</div>
</td>
<td>
<div class="tableHeader">Title2</div>
</td>
<td>
<div class="tableHeader">Title3</div>
</td>
<td>
<div class="tableHeader">Title4</div>
</td>
<td>
<div class="tableHeader">Title5</div>
</td>
</tr>
</table>
</div>
<div id="table_div" style="overflow: scroll;width:517;height:517;position:relative" onscroll="fnScroll()" >
<table width="2000px" cellspacing="0" cellpadding="0" border="1" >
<colgroup width="100"></colgroup>
<colgroup width="*"></colgroup>
<colgroup width="100"></colgroup>
<colgroup width="100"></colgroup>
<colgroup width="*"></colgroup>
<tr id='firstTr'>
<td>Row1Col1</td>
<td>Row1Col2</td>
<td>Row1Col3</td>
<td>Row1Col4</td>
<td>Row1Col5</td>
</tr>
<tr>
<td>Row2Col1</td>
<td>Row2Col2</td>
<td>Row2Col3</td>
<td>Row2Col4</td>
<td>Row3Col5</td>
</tr>
<tr>
<td>Row3Col1</td>
<td>Row3Col2</td>
<td>Row3Col3 is both wider and<br />taller than surrounding cells, yet<br />fixed elements still line up correctly</td>
<td>Row3Col4</td>
<td>Row3Col5</td>
</tr>
<tr>
<td>Row4Col1</td>
<td>Row4Col2</td>
<td>Row4Col3</td>
<td>Row4Col4</td>
<td>Row4Col5</td>
</tr>
<tr>
<td>Row5Col1</td>
<td>Row5Col2</td>
<td>Row5Col3</td>
<td>Row5Col4</td>
<td>Row5Col5</td>
</tr>
<tr>
<td>Row6Col1</td>
<td>Row6Col2</td>
<td>Row6Col3 is both wider and<br />taller than surrounding cells, yet<br />fixed elements still line up correctly</td>
<td>Row6Col4</td>
<td>Row6Col5</td>
</tr>
<tr>
<td>Row7Col1</td>
<td>Row7Col2</td>
<td>Row7Col3</td>
<td>Row7Col4</td>
<td>Row7Col5</td>
</tr>
<tr>
<td>Row3Col1</td>
<td>Row3Col2</td>
<td>Row3Col3 is both wider and<br />taller than surrounding cells, yet<br />fixed elements still line up correctly</td>
<td>Row3Col4</td>
<td>Row3Col5</td>
</tr>
<tr>
<td>Row4Col1</td>
<td>Row4Col2</td>
<td>Row4Col3</td>
<td>Row4Col4</td>
<td>Row4Col5</td>
</tr><tr>
<td>Row3Col1</td>
<td>Row3Col2</td>
<td>Row3Col3 is both wider and<br />taller than surrounding cells, yet<br />fixed elements still line up correctly</td>
<td>Row3Col4</td>
<td>Row3Col5</td>
</tr>
<tr>
<td>Row4Col1</td>
<td>Row4Col2</td>
<td>Row4Col3</td>
<td>Row4Col4</td>
<td>Row4Col5</td>
</tr><tr>
<td>Row3Col1</td>
<td>Row3Col2</td>
<td>Row3Col3 is both wider and<br />taller than surrounding cells, yet<br />fixed elements still line up correctly</td>
<td>Row3Col4</td>
<td>Row3Col5</td>
</tr>
<tr>
<td>Row4Col1</td>
<td>Row4Col2</td>
<td>Row4Col3</td>
<td>Row4Col4</td>
<td>Row4Col5</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
have been looking for this kind of code for the last one day, works great, hats offfffffff. Thanks Q
ReplyDeleteHmm Doesn't work for me. The title bar stays put...
ReplyDelete