The first link is an interesting approach, but unfortunately not suitable in my case. The table in question is populated by a series of Ajax calls already (did I mention it's a complex table? :).
I've seen the second link before and had a *kinda* workable solution with it at one point. But I couldn't find the link this time around - thanks for posting it. This will be the closest solution for me thus far, but still has some issues. As I recall, I needed to do some browser detection and apply the webtoolkit solution for IE, but use CSS for FF. The core problem was when horizontal scrolling was needed. The header wouldn't scroll with the tbody. But, the page looks different (color scheme), so I'll take another look - perhaps these issues have been resolved. Thanks again for the response. Shawn tlphipps wrote: > I've been trying to do this for awhile now too. Sounds like I have > the same issues with my app. > > Have you checked out any of the following? > > http://ajaxtop.sourceforge.net/tablescroller/example1.html > > http://www.webtoolkit.info/scrollable-html-table-plugin-for-jquery.html > > > On Dec 16, 3:44 am, Shawn <[EMAIL PROTECTED]> wrote: >> 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
