A few months ago, i am working on a website project which contains a very wide HTML table. The client wants to keep the top row and the two columns on the left hand side of the table sticky. There is no proper way to do it but and the only solution i could found is using a jQuery library written by Conan Albrecht. The original post could be found in the link below but the source link is no longer valid.
A JQuery Plugin For Freezing Table Rows/Columns
Luckily i have a copy of the lib and you can download here.
Try the following piece of HTML code and see how it works.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
body {
margin: 0px auto;
width: 800px;
}
#freeze-table {
width: 1200px;
}
th {
background-color: grey;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.freezetablecolumns.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#freeze-table').freezeTableColumns({
width: 800, // required
height: 500, // required
numFrozen: 2, // optional
frozenWidth: 160, // optional
clearWidths: true, // optional
});
});
</script>
</head>
<body>
<table id="freeze-table">
<thead>
<tr>
<th>Name</th>
<th>Location</th>
<th>Registration Date</th>
<th>Occupation</th>
<th>Profession</th>
<th>Registration Date</th>
<th>Occupation</th>
<th>Profession</th>
</tr>
</thead>
<tbody>
<tr>
<td>Kit</td>
<td>Hong Kong</td>
<td>2013-04-08</td>
<td>Freelancer</td>
<td>Web development</td>
<td>2013-04-08</td>
<td>Freelancer</td>
<td>Web development</td>
</tr>
<tr>
<td>Kit</td>
<td>Hong Kong</td>
<td>2013-04-08</td>
<td>Freelancer</td>
<td>Web development</td>
<td>2013-04-08</td>
<td>Freelancer</td>
<td>Web development</td>
</tr>
<tr>
<td>Kit</td>
<td>Hong Kong</td>
<td>2013-04-08</td>
<td>Freelancer</td>
<td>Web development</td>
<td>2013-04-08</td>
<td>Freelancer</td>
<td>Web development</td>
</tr>
</tbody>
</table>
</body>
</html>
The table now has frozen columns and top row.
Done =)
Eureka! 
how to make freeze_Table_row..???..
thanks
LikeLike
i guess you are talking about table with sticky header. here are 2 references which may help.
LikeLike
Thanks for your copy lib, i love this lib, it realy clear and easy use. If it not display right, try to set a div wrap table to display none, and at $(window).load() we will show this div.
Here is author. http://www.goalbrecht.com/2012/02/a-jquery-plugin-for-freezing-table-rowscolumns/
LikeLike
You are welcome and thanks for your link to the original author~ =)
LikeLike
The error message is caused by the trailing comma at the end of the object. It only happens in IE.
<script type="text/javascript"> $(document).ready(function(){ $('#freeze-table').freezeTableColumns({ width: 800, // required height: 500, // required numFrozen: 2, // optional frozenWidth: 160, // optional clearWidths: true, // optional }); }); </script>LikeLike
In my case it is not freezing the Header row
LikeLike
My bad, the <th> and <tr> have to be wrapped by <thead> and <tbody>. i have updated the example. try to add more rows and the header row should be sticky.
LikeLike
this is slowing down the performance in IE
LikeLike
in chrome it works fine but in IE this is causing lots of performance issue. i have added the freezing with lots of effort , i dont wann remove it now. please help me how can i improve the performance in IE 9 and above
LikeLike
It’s a trade off i think, it u need to make things work in ie, u have to pay more effort.
actually i didn’t write this library, i am sorry that i couldn’t help. =(
LikeLike