How to implement fixed header with vertical scroller in MVC 3 application

See more:

MVC3

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 aignment 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);
});