How to implement fixed header with vertical scroller MVC 3

Question

Hello Everyone,

 

Please help me to implement the Fixed table header with MVC 3 application.

 

I am already using one jQuery script for this, it' working but I am facing table header and body alignment issue.

 

Does anyone know the best way to implement this without adding any extra CSS.

 

NOTE:- Currently I am using jQuery 1.5.1 version for this.

 

Thank you

 

What I have tried

 

below is the code

function scrolify(tblAsJQueryObject, height) {
var oTbl = tblAsJQueryObject;
// for very large tables you can remove the four lines below
// and wrap the table with in the mark-up and assign
// height and overflow property
var oTblDiv = $("");
oTblDiv.css('height', height);
oTblDiv.css('overflow', 'auto');
oTblDiv.css('overflow-x', 'hidden');
oTblDiv.css('margin-right', "2px");
oTbl.wrap(oTblDiv);
// save original width
oTbl.attr("data-item-original-width", oTbl.width());
oTbl.find('thead tr td').each(function () {
$(this).attr("data-item-original-width", $(this).width());
});
oTbl.find('tbody tr td').each(function () {
$(this).attr("data-item-original-width", $(this).width());
});

// clone the original table
var newTbl = oTbl.clone();
// remove table header from original table
oTbl.find('thead tr').remove();
// remove table body from new table
newTbl.find('tbody tr').remove();
oTbl.parent().parent().prepend(newTbl);
newTbl.wrap("");
// replace ORIGINAL COLUMN width
newTbl.width(newTbl.attr('data-item-original-width'));
newTbl.find('thead tr td').each(function () {
$(this).width($(this).attr("data-item-original-width"));
});
oTbl.width(newTbl.attr('data-item-original-width'));
oTbl.find('thead tr td').each(function () {
$(this).width($(this).attr("data-item-original-width"));
});
newTbl.width(newTbl.attr('data-item-original-width'));
newTbl.find('tbody tr td').each(function () {
$(this).width($(this).attr("data-item-original-width"));
});
oTbl.width(oTbl.attr('data-item-original-width'));
oTbl.find('tbody tr td').each(function () {
$(this).width($(this).attr("data-item-original-width"));
});
}
$(document).ready(function () {
scrolify($('#invitedTable'), 200);// 160 is height
scrolify($('#pdartTable'), 200);
});