How to implement fixed header with vertical scroller MVC 3

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

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Laxmidhar Sahoo6y ago
hi
Do not add the css overflow with the table. You should be apply it with tbody ,so that head will be constant and body will be movable.In the bellow tbody valriable add the css overflow
newTbl.find('tbody tr td').each(function () {
$(this).width($(this).attr("data-item-original-width"));
});