PDA

View Full Version : Having difficulty in locking table head in FF



inicky
Mar 5th, 2008, 10:36 AM
Hi,

I have made a table layout in HTML in which i have locke the table header and some table cells usin css. It is showing fine in IE but is not working in FF.

Here is the CSS code.

--------------------------------------------------------------------------
div#tableListDiv {
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #f3efee;
scrollbar-shadow-color: #ffffff;
scrollbar-3dlight-color: #ffffff;
scrollbar-arrow-color: #003f72;
scrollbar-track-color: #ffffff;
scrollbar-darkshadow-color: #003f72;
}


div#tableListDiv table th {
width: 100px;
position: relative;
}

thead th.locked {
border-bottom: #cccccc 1px solid;
border-right: #cccccc 1px solid;
font-size: 12px;
cursor: default;
color: #f5821f;
position: relative;
background-color: #e3e8f2;
}

thead th.locked {
z-index: 30;
}

thead th {
z-index: 20;
top: expression(document.getElementById("tableListDiv").scrollTop-2.5);
}

td.locked {
border-bottom: #cccccc 1px solid;
border-right: #cccccc 1px solid;
font-size: 12px;
z-index: 10;
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
position: relative;
background-color: #ffffff;
}

th.locked {
border-right: cccccc 1px solid;
font-size: 12px;
z-index: 10;
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
position: relative;
background-color: #d9e6f6;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #cccccc;
}

.bluetabletextheaderlocked {
font-family: Tahoma;
font-size: 11px;
color: #00428a;
padding-right: 1px;
padding-left: 8px;
line-height: 18px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #cccccc;
font-weight: bold;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #cccccc;
background-color: #f3f3f3;
z-index: 10;
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
position: relative;
}

.tabletextboldlocked {
z-index: 10;
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
position: relative;
font-family: Tahoma;
font-size: 11px;
color: #000000;
padding-right: 1px;
padding-left: 8px;
line-height: 18px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #cccccc;
font-weight: bold;
border-right-width: 2px;
border-right-style: solid;
border-right-color: #999999;
background-color:#ffffff;
}

.tabletextlocked {
z-index: 10;
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
position: relative;
font-family: Tahoma;
font-size: 11px;
color: #000000;
padding-right: 1px;
padding-left: 8px;
line-height: 18px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #cccccc;
border-right-width: 2px;
border-right-style: solid;
border-right-color: #999999;
background-color: #ffffff;
}

.tblheader {
background-color: #E3E8F2;
color: #F5821F;
}
--------------------------------------------------------------------------

Please help me in getting out of it :confused:

VIPStephan
Mar 5th, 2008, 01:44 PM
What do you mean by “locked table header and some table cells”? Do you mean you enabled scrolling of the table while some cells are locked to their position?



expression(parentNode.parentNode.parentNode.parentNode.scrollLeft)

Such things don’t work in any browser but IE because it’s Microsoft proprietary code and not part of any standard so other browser vendors just haven’t implemented it.

Usually you can work with thead, tfoot, and tbody to enable fixed and scrollable sections of tables (by setting tbody’s overflow to auto).

inicky
Mar 6th, 2008, 06:50 AM
I want to lock some cells of a table to prevent them from scrolling by using css.

Is there any such way to do such thing?

_Aerospace_Eng_
Mar 6th, 2008, 07:11 AM
VIP gave you the solutions. Post your HTML as well please if you didn't understand what he said to do.

inicky
Mar 7th, 2008, 12:22 PM
Actually here is the html code that i m working on. It works proper in IE but is not showing right in FF. Please help me in fixing it.

<html>
<head>
<title>Locking Table</title>
<style type="text/css">
div#tableListDiv {
scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#f3efee;
scrollbar-shadow-color:#ffffff;
scrollbar-3dlight-color:#ffffff;
scrollbar-arrow-color:#003f72;
scrollbar-track-color:#ffffff;
scrollbar-darkshadow-color:#003f72;
}


div#tableListDiv table th {
width:100px;
position:relative;
}

thead th.locked {
border-bottom:#cccccc 1px solid;
border-right:#cccccc 1px solid;
font-size:12px;
cursor: default;
color: #f5821f;
position: fixed;
background-color: #e3e8f2;
}

thead th.locked {
z-index: 30;
}

thead th {
z-index: 20;
top: expression(document.getElementById("tableListDiv").scrollTop-2.5);
}

td.locked {
border-bottom: #cccccc 1px solid;
border-right: #cccccc 1px solid;
font-size: 12px;
z-index: 10;
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
position: relative;
background-color: #ffffff;
}

th.locked {
border-right: cccccc 1px solid;
font-size: 12px;
z-index: 10;
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
position: relative;
background-color: #d9e6f6;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #cccccc;
}

.bluetabletextheaderlocked {
font-family: Tahoma;
font-size: 11px;
color: #00428a;
padding-right: 1px;
padding-left: 8px;
line-height: 18px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #cccccc;
font-weight: bold;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #cccccc;
background-color: #f3f3f3;
z-index: 10;
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
position: relative;
}

.tabletextboldlocked {
z-index: 10;
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
position: relative;
font-family: Tahoma;
font-size: 11px;
color: #000000;
padding-right: 1px;
padding-left: 8px;
line-height: 18px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #cccccc;
font-weight: bold;
border-right-width: 2px;
border-right-style: solid;
border-right-color: #999999;
background-color:#ffffff;
}

.tabletextlocked {
z-index: 10;
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
position: relative;
font-family: Tahoma;
font-size: 11px;
color: #000000;
padding-right: 1px;
padding-left: 8px;
line-height: 18px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #cccccc;
border-right-width: 2px;
border-right-style: solid;
border-right-color: #999999;
background-color: #ffffff;
}

.tblheader {
background-color: #E3E8F2;
color: #F5821F;
}
</style>
</head>

<body>
<div id="tableListDiv" style="overflow:auto;height:400;width:1000">
<table width="1900" border="1" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC">
<tbody>
<thead>
<tr>
<th width="57" class="locked">ABC</th>
<th width="83" class="locked">DEF</th>
<th colspan="2" style="text-align:left; background-color:#FFFFFF;">abc</th>
<th colspan="2" style="text-align:left; background-color:#FFFFFF;">abc</th>
<th colspan="2" style="text-align:left; background-color:#FFFFFF;">abc</th>
<th colspan="2" style="text-align:left; background-color:#FFFFFF;">abc</th>
<th colspan="2" style="text-align:left; background-color:#FFFFFF;">abc</th>
<th colspan="2" style="text-align:left; background-color:#FFFFFF;">abc</th>
<th colspan="2" style="text-align:left; background-color:#FFFFFF;">abc</th>
</tr>
<tr>
<th colspan="2" class="locked" style="background-color:#FFFFFF">&nbsp;</th>
<th width="106" style="text-align:left; background-color:#FFFFFF;">def</th>
<th width="109" style="text-align:left; background-color:#FFFFFF;">def</th>
<th width="107" style="text-align:left; background-color:#FFFFFF;">def</th>
<th width="112" style="text-align:left; background-color:#FFFFFF;">def</th>
<th width="106" style="text-align:left; background-color:#FFFFFF;">def</th>
<th width="110" style="text-align:left; background-color:#FFFFFF;">def</th>
<th width="105" style="text-align:left; background-color:#FFFFFF;">def</th>
<th width="109" style="text-align:left; background-color:#FFFFFF;">def</th>
<th width="127" style="text-align:left; background-color:#FFFFFF;">def</th>
<th width="121" style="text-align:left; background-color:#FFFFFF;">def</th>
<th width="116" style="text-align:left; background-color:#FFFFFF;">def</th>
<th width="128" style="text-align:left; background-color:#FFFFFF;">def</th>
<th width="140" style="text-align:left; background-color:#FFFFFF;">def</th>
<th width="128" style="text-align:left; background-color:#FFFFFF;">def</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="16" class="bluetabletextheaderlocked">kjdfhdkasjh </td>
</tr>
<tr>
<td colspan="2" class="tabletextboldlocked">dfjl;skfjlaksjflakj</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC </td>
<td bordercolor="#FFFFFF">CCC </td>
<td bordercolor="#FFFFFF">CCC </td>
<td bordercolor="#FFFFFF">CCC </td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC </td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC </td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC </td>
<td bordercolor="#FFFFFF">CCC</td>
</tr>
<tr>
<td colspan="16" class="bluetabletextheaderlocked">asdklfjlskadjflk </td>
</tr>
<tr>
<td colspan="16" class="tabletextboldlocked">sadfasdfasd</td>
</tr>
<tr>
<td class="locked">&nbsp;</td>
<td class="tabletextlocked">aaa </td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC </td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
</tr>
<tr>
<td class="locked">&nbsp;</td>
<td class="tabletextlocked">aaa</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC </td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
</tr>
<tr>
<td class="locked">&nbsp;</td>
<td class="tabletextlocked">aaa</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC </td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
</tr>
<tr>
<td colspan="16" class="tabletextboldlocked">hjgkgjklglhjk,nm </td>
</tr>
<tr>
<td class="locked">&nbsp;</td>
<td class="tabletextlocked">aaa</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
</tr>
<tr>
<td class="locked">&nbsp;</td>
<td class="tabletextlocked">aaa</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
</tr>
<tr>
<td class="locked">&nbsp;</td>
<td class="tabletextlocked">aaa</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC </td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC </td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
</tr>
<tr>
<td colspan="16" class="tabletextboldlocked">fasdfasdxcbvcbncv</td>
</tr>
<tr>
<td class="locked">&nbsp;</td>
<td class="tabletextlocked">aaa </td>
<td bordercolor="#FFFFFF">&nbsp;</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">&nbsp;</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">&nbsp;</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">&nbsp;</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">&nbsp;</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">&nbsp;</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">&nbsp;</td>
<td bordercolor="#FFFFFF">CCC</td>
</tr>
<tr>
<td class="locked">&nbsp;</td>
<td class="tabletextlocked">aaa</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC </td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
</tr>
<tr>
<td class="locked">&nbsp;</td>
<td class="tabletextlocked">aaa</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC </td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
</tr>
<tr>
<td colspan="16" class="bluetabletextheaderlocked">dsfadfasdft </td>
</tr>
<tr>
<td colspan="16" class="tabletextboldlocked">fdsgfvnmv,bjkjhf</td>
</tr>
<tr>
<td class="locked">&nbsp;</td>
<td class="tabletextlocked">aaa</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC </td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC </td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
</tr>
<tr>
<td class="locked">&nbsp;</td>
<td class="tabletextlocked">aaa</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC </td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
</tr>
<tr>
<td class="locked">&nbsp;</td>
<td class="tabletextlocked">aaa</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC </td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC </td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
</tr>
</tbody>
<!-- <tfoot>
<tr>
<td class="locked" align="left"><b>CCC </b></td>
<td class="locked" align="right">CCC</td>
<td class="locked" align="right">CCC</td>
<td class="tabletext" nowrap="true" align="right"><b>-<b></b></b></td>
<td class="tabletext" nowrap="true" align="right"><b>-<b></b></b></td>
<td class="tabletext" nowrap="true" align="right"><b>21,600<b></b></b></td>
<td class="tabletext" nowrap="true" align="right"><b>21,600<b></b></b></td>
<td class="tabletext" nowrap="true" align="right"><b>-<b></b></b></td>
<td class="tabletext" nowrap="true" align="right"><b>INR240.00<b></b></b></td>
</tr>
</tfoot>
--> </table>
</div>
</body>
</html>

jerry62704
Mar 7th, 2008, 03:42 PM
If you are going to have <tfoot>, it has to appear before <tbody> and after <thead> IIRC. The whole point is in some browsers to have a scrollable body and fixed head and foot.

VIPStephan
Mar 7th, 2008, 04:10 PM
Please use the small '#' button in the reply window to post code (put it in between
tags). It’s really annoying to scroll down for an hour to find the end of your post.

OK, a really simple example:



<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

The CSS would be:


tbody {
height: ??px;
overflow: auto;
}


Oh and don’ forget to use a proper doctype (http://alistapart.com/articles/doctype/) in the very beginning of your document.

jerry62704
Mar 7th, 2008, 04:20 PM
Question. The HTML code box is much larger than the CSS one. Is the size of the box dependent on the size of the original code? Is there anyway to influence the size (to make it smaller)?

inicky
Mar 8th, 2008, 07:51 AM
Ok, I got it. I am posting the code again.

Here is the code for the page


<html>
<head>
<title>Locking Table</title>
</head>

<body>
<div id="tableListDiv" style="overflow:auto;height:400;width:1000">
<table width="1900" border="1" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC">
<tbody>
<thead>
<tr>
<th width="57" class="locked">ABC</th>
<th width="83" class="locked">DEF</th>
<th colspan="2" style="text-align:left; background-color:#FFFFFF;">abc</th>
<th colspan="2" style="text-align:left; background-color:#FFFFFF;">abc</th>
<th colspan="2" style="text-align:left; background-color:#FFFFFF;">abc</th>
<th colspan="2" style="text-align:left; background-color:#FFFFFF;">abc</th>
<th colspan="2" style="text-align:left; background-color:#FFFFFF;">abc</th>
<th colspan="2" style="text-align:left; background-color:#FFFFFF;">abc</th>
<th colspan="2" style="text-align:left; background-color:#FFFFFF;">abc</th>
</tr>
<tr>
<th colspan="2" class="locked" style="background-color:#FFFFFF">&nbsp;</th>
<th width="106" style="text-align:left; background-color:#FFFFFF;">def</th>
<th width="109" style="text-align:left; background-color:#FFFFFF;">def</th>
<th width="107" style="text-align:left; background-color:#FFFFFF;">def</th>
<th width="112" style="text-align:left; background-color:#FFFFFF;">def</th>
<th width="106" style="text-align:left; background-color:#FFFFFF;">def</th>
<th width="110" style="text-align:left; background-color:#FFFFFF;">def</th>
<th width="105" style="text-align:left; background-color:#FFFFFF;">def</th>
<th width="109" style="text-align:left; background-color:#FFFFFF;">def</th>
<th width="127" style="text-align:left; background-color:#FFFFFF;">def</th>
<th width="121" style="text-align:left; background-color:#FFFFFF;">def</th>
<th width="116" style="text-align:left; background-color:#FFFFFF;">def</th>
<th width="128" style="text-align:left; background-color:#FFFFFF;">def</th>
<th width="140" style="text-align:left; background-color:#FFFFFF;">def</th>
<th width="128" style="text-align:left; background-color:#FFFFFF;">def</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="16" class="bluetabletextheaderlocked">kjdfhdkasjh </td>
</tr>
<tr>
<td colspan="2" class="tabletextboldlocked">dfjl;skfjlaksjflakj</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC </td>
<td bordercolor="#FFFFFF">CCC </td>
<td bordercolor="#FFFFFF">CCC </td>
<td bordercolor="#FFFFFF">CCC </td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC </td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC </td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC </td>
<td bordercolor="#FFFFFF">CCC</td>
</tr>
<tr>
<td colspan="16" class="bluetabletextheaderlocked">asdklfjlskadjflk </td>
</tr>
<tr>
<td colspan="16" class="tabletextboldlocked">sadfasdfasd</td>
</tr>
<tr>
<td class="locked">&nbsp;</td>
<td class="tabletextlocked">aaa </td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC </td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
</tr>
<tr>
<td class="locked">&nbsp;</td>
<td class="tabletextlocked">aaa</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC </td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
</tr>
<tr>
<td class="locked">&nbsp;</td>
<td class="tabletextlocked">aaa</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC </td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
</tr>
<tr>
<td colspan="16" class="tabletextboldlocked">hjgkgjklglhjk,nm </td>
</tr>
<tr>
<td class="locked">&nbsp;</td>
<td class="tabletextlocked">aaa</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
</tr>
<tr>
<td class="locked">&nbsp;</td>
<td class="tabletextlocked">aaa</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
</tr>
<tr>
<td class="locked">&nbsp;</td>
<td class="tabletextlocked">aaa</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC </td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC </td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
</tr>
<tr>
<td colspan="16" class="tabletextboldlocked">fasdfasdxcbvcbncv</td>
</tr>
<tr>
<td class="locked">&nbsp;</td>
<td class="tabletextlocked">aaa </td>
<td bordercolor="#FFFFFF">&nbsp;</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">&nbsp;</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">&nbsp;</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">&nbsp;</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">&nbsp;</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">&nbsp;</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">&nbsp;</td>
<td bordercolor="#FFFFFF">CCC</td>
</tr>
<tr>
<td class="locked">&nbsp;</td>
<td class="tabletextlocked">aaa</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC </td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
</tr>
<tr>
<td class="locked">&nbsp;</td>
<td class="tabletextlocked">aaa</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC </td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
</tr>
<tr>
<td colspan="16" class="bluetabletextheaderlocked">dsfadfasdft </td>
</tr>
<tr>
<td colspan="16" class="tabletextboldlocked">fdsgfvnmv,bjkjhf</td>
</tr>
<tr>
<td class="locked">&nbsp;</td>
<td class="tabletextlocked">aaa</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC </td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC </td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
</tr>
<tr>
<td class="locked">&nbsp;</td>
<td class="tabletextlocked">aaa</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC </td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
</tr>
<tr>
<td class="locked">&nbsp;</td>
<td class="tabletextlocked">aaa</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC </td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC </td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
<td bordercolor="#FFFFFF">CCC</td>
</tr>
</tbody>
<!-- <tfoot>
<tr>
<td class="locked" align="left"><b>CCC </b></td>
<td class="locked" align="right">CCC</td>
<td class="locked" align="right">CCC</td>
<td class="tabletext" nowrap="true" align="right"><b>-<b></b></b></td>
<td class="tabletext" nowrap="true" align="right"><b>-<b></b></b></td>
<td class="tabletext" nowrap="true" align="right"><b>21,600<b></b></b></td>
<td class="tabletext" nowrap="true" align="right"><b>21,600<b></b></b></td>
<td class="tabletext" nowrap="true" align="right"><b>-<b></b></b></td>
<td class="tabletext" nowrap="true" align="right"><b>INR240.00<b></b></b></td>
</tr>
</tfoot>
--> </table>
</div>
</body>
</html>


And here is the css code.



div#tableListDiv {
scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#f3efee;
scrollbar-shadow-color:#ffffff;
scrollbar-3dlight-color:#ffffff;
scrollbar-arrow-color:#003f72;
scrollbar-track-color:#ffffff;
scrollbar-darkshadow-color:#003f72;
}


div#tableListDiv table th {
width:100px;
position:relative;
}

thead th.locked {
border-bottom:#cccccc 1px solid;
border-right:#cccccc 1px solid;
font-size:12px;
cursor: default;
color: #f5821f;
position: fixed;
background-color: #e3e8f2;
}

thead th.locked {
z-index: 30;
}

thead th {
z-index: 20;
top: expression(document.getElementById("tableListDiv").scrollTop-2.5);
}

td.locked {
border-bottom: #cccccc 1px solid;
border-right: #cccccc 1px solid;
font-size: 12px;
z-index: 10;
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
position: relative;
background-color: #ffffff;
}

th.locked {
border-right: cccccc 1px solid;
font-size: 12px;
z-index: 10;
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
position: relative;
background-color: #d9e6f6;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #cccccc;
}

.bluetabletextheaderlocked {
font-family: Tahoma;
font-size: 11px;
color: #00428a;
padding-right: 1px;
padding-left: 8px;
line-height: 18px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #cccccc;
font-weight: bold;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #cccccc;
background-color: #f3f3f3;
z-index: 10;
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
position: relative;
}

.tabletextboldlocked {
z-index: 10;
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
position: relative;
font-family: Tahoma;
font-size: 11px;
color: #000000;
padding-right: 1px;
padding-left: 8px;
line-height: 18px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #cccccc;
font-weight: bold;
border-right-width: 2px;
border-right-style: solid;
border-right-color: #999999;
background-color:#ffffff;
}

.tabletextlocked {
z-index: 10;
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
position: relative;
font-family: Tahoma;
font-size: 11px;
color: #000000;
padding-right: 1px;
padding-left: 8px;
line-height: 18px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #cccccc;
border-right-width: 2px;
border-right-style: solid;
border-right-color: #999999;
background-color: #ffffff;
}

.tblheader {
background-color: #E3E8F2;
color: #F5821F;
}


I guess its better.