The above solution is quite good....Here is one more solution which I could figure out for column freez/lock . It takes the clone of the columns which it wants to lock and then paste that clone over those columns which are to be locked which in turns create the effect that the columns are freezed .I tasted the example with 1000 rows and on IE and Mozilla . It works fine for both the browsers as well as performance is quite good. As far as the API is concern there is only one function called duplicateTable() to which the parameters are table id of the table and the number of columns to be locked and it will do rest of the stuff.
code is as follows
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
.BottomScrollbar {
height:18px;
width:350px;
border:0;
margin:0;
overflow-x:scroll;
overflow-y:hidden;
padding:0;
}
.RightScrollbar {
height:400px;
width:18px;
border:0;
margin:0;
overflow-x:hidden;
overflow-y:scroll;
padding:0;
}
.gridouter {
position:relative;
width:350px;
height:400px;
overflow:hidden;
padding: 0 1px 1px 0;
}
.gridinner {
position:relative;
}
.cell {
position: relative;
left: 0px;
top: 0px;
width: 99px;
height: 119px;
overflow: hidden;
border: 1px solid black;
margin: 0 -1px -1px 0;
}
.gridhead .cell,
.gridfoot .cell,
.staticleft,
.staticright {
z-index: 1;
}
.gridhead .staticleft,
.gridhead .staticright,
.gridfoot .staticleft,
.gridfoot .staticright {
z-index: 2;
}
.staticleft,
.staticright {
background-color: #f0f0f0;
}
.gridhead .cell,
.gridfoot .cell {
background-color: #d0d0d0;
}
.gridhead .cell,
.gridfoot .cell {
top: 0px;
}
.gridhead {
position: absolute;
}
.gridheadrow {
position: relative;
z-index: 2;
top: 0px;
}
.gridfoot {
position: absolute;
left: 0px;
z-index: 2;
}
.gridfootrow {
position: relative;
z-index: 2;
top: 0px;
}
.gridbody {
position: absolute;
overflow: hidden;
}
</style>
</head>
<body>
<script>
function setElementLeft(elId, leftpx, rightpx) {
function setCellLeft(cell, isFirst) {
if (cell.tagName != 'TD' && cell.tagName != 'TH') {
if (isFirst) {
cell = cell.nextSibling;
} else {
cell = cell.previousSibling;
}
}
cell = cell.firstChild;
if (cell.tagName != 'DIV') {
cell = cell.nextSibling;
}
if (isFirst) {
cell.style.left = leftpx;
} else {
cell.style.left = rightpx;
}
}
var body = document.getElementById(elId);
for (var i = 0; i < body.childNodes.length; i++) {
var row = body.childNodes[i];
if (row.tagName == 'TR') {
setCellLeft(row.firstChild, true);
setCellLeft(row.lastChild);
}
}
}
function doBottomScroller() {
var left = document.getElementById('bottomscrollbar').scrollLeft;
// Access offsetWidths before anything; if accessed later get horrid scroll jitter in FF
var rightpx =
String(left + document.getElementById('gridouterid').offsetWidth - document.getElementById('gridheadid').offsetWidth - 1) + 'px';
var leftpx = String(left) + 'px';
setElementLeft('gridheadid', leftpx, rightpx);
setElementLeft('gridfootid', leftpx, rightpx);
setElementLeft('gridbodyid', leftpx, rightpx);
if (document.all) {
document.getElementById('gridinnerid').style.left = '-' + leftpx;
} else {
document.getElementById('gridheadid').style.left = '-' + leftpx;
document.getElementById('gridfootid').style.left = '-' + leftpx;
document.getElementById('gridbodyid').style.left = '-' + leftpx;
}
}
function doRightScroller() {
var top = document.getElementById('rightscrollbar').scrollTop;
// access offsets before setting anything, otherwise FF display jitters
var headHeight = document.getElementById('gridheadid').offsetHeight;
var footHeight = document.getElementById('gridfootid').offsetHeight;
var outerHeight = document.getElementById('gridouterid').offsetHeight;
var footOffset = outerHeight - footHeight - 1;
if (document.all) {
document.getElementById('gridheadrowid').style.top = String(top + headHeight) + 'px';
document.getElementById('gridfootrowid').style.top = String(top + footOffset) + 'px';
document.getElementById('gridinnerid').style.top = String(-top - footHeight) + 'px';
} else {
document.getElementById('gridfootid').style.top = String(footOffset) + 'px';
var gridBody = document.getElementById('gridbodyid');
gridBody.style.top = String(footHeight) + 'px';
gridBody.style.height = String(outerHeight - footHeight - headHeight) + 'px';
gridBody.scrollTop = top;
}
}
</script>
<table cellpadding=0 cellspacing=0 border=0>
<tr>
<td>
<div class="gridouter" id="gridouterid">
<div class="gridinner" id="gridinnerid">
<!-- the footer is a tbody and at the top to prevent flicker and other problems -->
<table class="grid" cellpadding=0 cellspacing=0 border=0>
<thead class="gridhead" id="gridheadid">
<tr class="gridheadrow" id="gridheadrowid">
<th>
<div class="cell staticleft">
head head head head head head head
<input value="hello hello hello">
</div>
</th>
<th>
<div class="cell">
div 2 div 2 div 2 div 2 div 2 div 2 div 2
<input value="hello hello hello">
</div>
</th>
<th>
<div class="cell">
div 3 div 3 div 3 div 3 div 3 div 3 div 3
<input value="hello hello hello">
</div>
</th>
<th>
<div class="cell">
div 4 div 4 div 4 div 4 div 4 div 4 div 4
<input value="hello hello hello">
</div>
</th>
<th>
<div class="cell staticright">
div 5 div 5 div 5 div 5 div 5 div 5 div 5
<input value="hello hello hello">
</div>
</th>
</tr>
</thead>
<tbody class="gridfoot" id="gridfootid">
<tr class="gridfootrow" id="gridfootrowid">
<th>
<div class="cell staticleft">
foot foot foot foot foot foot foot
<input value="hello hello hello">
</div>
</th>
<th>
<div class="cell">
div 2 div 2 div 2 div 2 div 2 div 2 div 2
<input value="hello hello hello">
</div>
</th>
<th>
<div class="cell">
div 3 div 3 div 3 div 3 div 3 div 3 div 3
<input value="hello hello hello">
</div>
</th>
<th>
<div class="cell">
div 4 div 4 div 4 div 4 div 4 div 4 div 4
<input value="hello hello hello">
</div>
</th>
<th>
<div class="cell staticright">
div 5 div 5 div 5 div 5 div 5 div 5 div 5
<input value="hello hello hello">
</div>
</th>
</tr>
</tbody>
<tbody class="gridbody" id="gridbodyid">
<tr>
<td>
<div class="cell staticleft">
row 1 row 1 row 1 row 1 row 1 row 1 row 1
<input value="hello hello hello">
</div>
</td>
<td>
<div class="cell">
div 2 div 2 div 2 div 2 div 2 div 2 div 2
<input value="hello hello hello">
</div>
</td>
<td>
<div class="cell">
div 3 div 3 div 3 div 3 div 3 div 3 div 3
<input value="hello hello hello">
</div>
</td>
<td>
<div class="cell">
div 4 div 4 div 4 div 4 div 4 div 4 div 4
<input value="hello hello hello">
</div>
</td>
<td>
<div class="cell staticright">
div 5 div 5 div 5 div 5 div 5 div 5 div 5
<input value="hello hello hello">
</div>
</td>
</tr>
<tr>
<td>
<div class="cell staticleft">
row 2 row 2 row 2 row 2 row 2 row 2 row 2
<input value="hello hello hello">
</div>
</td>
<td>
<div class="cell">
div 2 div 2 div 2 div 2 div 2 div 2 div 2
<input value="hello hello hello">
</div>
</td>
<td>
<div class="cell">
div 3 div 3 div 3 div 3 div 3 div 3 div 3
<input value="hello hello hello">
</div>
</td>
<td>
<div class="cell">
div 4 div 4 div 4 div 4 div 4 div 4 div 4
<input value="hello hello hello">
</div>
</td>
<td>
<div class="cell staticright">
div 5 div 5 div 5 div 5 div 5 div 5 div 5
<input value="hello hello hello">
</div>
</td>
</tr>
<tr>
<td>
<div class="cell staticleft">
row 3 row 3 row 3 row 3 row 3 row 3 row 3
<input value="hello hello hello">
</div>
</td>
<td>
<div class="cell">
div 2 div 2 div 2 div 2 div 2 div 2 div 2
<input value="hello hello hello">
</div>
</td>
<td>
<div class="cell">
div 3 div 3 div 3 div 3 div 3 div 3 div 3
<input value="hello hello hello">
</div>
</td>
<td>
<div class="cell">
div 4 div 4 div 4 div 4 div 4 div 4 div 4
<input value="hello hello hello">
</div>
</td>
<td>
<div class="cell staticright">
div 5 div 5 div 5 div 5 div 5 div 5 div 5
<input value="hello hello hello">
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
<td>
<div id="rightscrollbar" class="RightScrollbar" onscroll="doRightScroller()" >
<div style="height: 600px;">
</div>
</div>
</td>
</tr>
<tr>
<td>
<div style="width:350px; height:18px;">
<div id="bottomscrollbar" class="BottomScrollbar" onscroll="doBottomScroller()" >
<div style="width: 500px;">
</div>
</div>
</td>
<td>
</td>
</tr>
</body>
</html>