hi,
I am using fixed-header code for my table on vertical scroll, its working fine for all column name except last two (balance and pay status) because they are going out side page (horizontally). and when i scroll from bottom to see the last two columns values , the fixed header only show the columns till advance, fixed header not showing last two remaining columns that go out side page horizontally.
Check the screen shots for better understanding.
image-1 you can see all column till pay status.
image -2 you can see vertical scroll working fine till advance column.
Image -3 but in this you can see after full horizontal scroll towards right side, it only showing column till advance, instead of balance and pay status.
Here is the full code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript" src="js/jquery.min.js"></script>
<script>
$(document).ready(function()
{
function moveScroll(){
var scroll = $(window).scrollTop();
var anchor_top = $("#maintable").offset().top;
var anchor_bottom = $("#bottom_anchor").offset().top;
if (scroll>anchor_top && scroll<anchor_bottom) {
clone_table = $("#clone");
if(clone_table.length == 0){
clone_table = $("#maintable").clone();
clone_table.attr('id', 'clone');
clone_table.css({position:'fixed',
'pointer-events': 'none',
top:0});
clone_table.width($("#maintable").width());
$("#table-container").append(clone_table);
$("#clone").css({visibility:'hidden'});
$("#clone thead").css({visibility:'visible', 'pointer-events':'auto'});
}
} else {
$("#clone").remove();
}
}
$(window).scroll(moveScroll);
});
</script>
<style>
thead {
background-color:white;
}
</style>
</head>
<body>
<div id="table-container">
<table border="1" align="center" cellpadding="0" cellspacing="0" class="display" id="maintable">
<thead>
<tr class="heading">
<td width="37" align="center">S.No.</td>
<td width="56" align="center">Booking Date</td>
<td width="55" align="center">Delivery Date</td>
<td width="41" align="center">Order No.</td>
<td width="65" align="center">Customer Name</td>
<td width="47" align="center">Status</td>
<td width="27" align="center">P.R.</td>
<td width="40" align="center">Cover</td>
<td width="25" align="center">Size</td>
<td width="75" align="center">Accessories</td>
<td width="32" align="center">Bag</td>
<td width="50" align="center">Packing</td>
<td width="39" align="center">Paper</td>
<td width="61" align="center">Coating</td>
<td width="32" align="center">G Total</td>
<td width="54" align="center">Advance</td>
<td width="48" align="center">Balance</td>
<td width="57" align="center">Pay Status</td>
</tr>
</thead>
<tr>
<td>1</td>
<td >12-02-2014</td>
<td >16-02-2014</td>
<td >1234</td>
<td >Rajesh Kumar Rathor</td>
<td >pending</td>
<td >80</td>
<td >ultra cover</td>
<td >200</td>
<td >Flip flop cover</td>
<td >Jute bag</td>
<td > Box packing</td>
<td >Thick matt</td>
<td > Matt lamination</td>
<td >2000</td>
<td >1000</td>
<td >1000</td>
<td >Paid</td>
</tr>
<tr>
<td>1</td>
<td >12-02-2014</td>
<td >16-02-2014</td>
<td >1234</td>
<td >rkr</td>
<td >pending</td>
<td >80</td>
<td >ultra cover</td>
<td >200</td>
<td >Flip flop cover</td>
<td >Jute bag</td>
<td > Box packing</td>
<td >Thick matt</td>
<td > Matt lamination</td>
<td >2000</td>
<td >1000</td>
<td >1000</td>
<td >Paid</td>
</tr>
<tr>
<td>1</td>
<td >12-02-2014</td>
<td >16-02-2014</td>
<td >1234</td>
<td >rkr</td>
<td >pending</td>
<td >80</td>
<td >ultra cover</td>
<td >200</td>
<td >Flip flop cover</td>
<td >Jute bag</td>
<td > Box packing</td>
<td >Thick matt</td>
<td > Matt lamination</td>
<td >2000</td>
<td >1000</td>
<td >1000</td>
<td >Paid</td>
</tr>
</table>
<div id="bottom_anchor"></div>
</div>
<!--<table id="bottom_anchor" border="1" align="center" cellpadding="0" cellspacing="0" >
</table>-->
</body>
</html>
Please check this and if found give me the solution for this.
thanks in Advance