Table scrolling with fixed headers

  Close, yet so far. http://www.ilsweb.com/table-scroll.cfm An attempt at using simple CSS to scroll the data of the table (tbody) with fixed headers (thead).  Only in Firefox, it sort of works, just enough to be really frustrating in how bad it looks and works.  None of the other browsers I tried even attempted to do this.  In Firefox, you get a vertical scroll bar to scroll the rows of data.  But the scroll bar is placed inside the tbody box, so that it is squeezed and a horizontal scroll bar is added to all accommodate the width of the vertical scroll bar.  And if that was not bad enough, the scroll bars only scroll the text of the cells, not the cell borders! Oh Well. I'm sure this is a problem that has been tackled by many people before.   Anybody willing to share a good hint on how to easily, and with as little extra markup, css and JavaScript as possible, allow a table to scroll with fixed headers.  Both the top rows AND the left most columns would be best.  But I could live with just the top if I had to. TIA

  On 12/23/2010 7:59 AM, Ian Skinner wrote: >    Close, yet so far. Much closer: http://www.ilsweb.com/table-scroll.cfm Using JQuery JavaScript, I now have top AND left headers staying in place while the table is scrolled vertically AND horizontally. It is absolutely atrocious markup.  The headers are in two separate tables (one for the top and one for the left) completely unassociated with the data!  So this only works for users with good eyesight.  One would probably have to provide a completely separate alternate version that tied all this back into a single table without the fancy scrolling for accessibility.  (Luckily today's project is for my consumption only). Also the headers are a bit jumpy, taking a noticeable fraction of a second to catch up with the scrolling. If anybody has better ideas on how to accomplish this type of output that would be smoother or -- better yet -- use more synaptic markup, I would love to hear about it. Ian