No problem. Please post back here if/when you find a workable solution. I haven't really dug deep into the subject yet.
On Dec 17, 6:25 pm, Shawn <[EMAIL PROTECTED]> wrote: > 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
