[jQuery] Fixed table header
Hi all,
I apologize if this is a little OT, but I've been at this for a couple
hours now and am not making any head way. So I'm hoping one of the
guru's on the list might point me in the right direction.
My goal is simple - I need a table with a fixed header. I've found a
few sites that purport to do this with pure CSS, but applying their
methods to my table are failing in FF and requiring a good deal of
changes to my structure. (different changes for each method I find). I
need this to work in both IE and FF. I *would* prefer a CSS method, but
suspect I need some JS involved.
What I'm currently trying is to clone my thead section into a new table
in a separate DIV above my table, then hide my original thead. I have
partial success where, but am failing when I try to fix the column
widths to match. I can't use fixed widths via CSS due to the nature of
the data/table. So I need to dynamically find the width of each column
from the main table, then apply that width to the corresponding header
column. Here's what I have so far:
fixHeader : function () {
//create the header table
$("#scheduleHeader").html("<table></table>");
$("#scheduleHeader table").append($(".crewSchedule >
thead").clone(true));
$(".crewSchedule > thead").hide();
//match the header div's width to the main div, adjusting for the
vertical scrollbar
$("#scheduleHeader").width($("#scheduleOutput").width() - 16);
//Fix the column widths in the header
$(".crewSchedule > tbody > tr:first > td").each( function (pos) {
$("#scheduleHeader th:eq(" + pos + ")").width($(this).width());
});
}
Can anyone point me to a better and/or more reliable way to do this?
This is functional enough for now, but isn't perfect. I'm getting some
1 or 2 pixel offsets due to borders, padding, etc. I'm not able to fix
EVERY place where this may occur in this code. (I really hate working
with ugly complex tables.. :)
Thanks for any tips - and listening to me vent.. :)
Shawn