Lee Jenkins wrote: > > Hi all, > > I'm trying to implement a scrolling table myself since my needs are very > simple. > I'm placing the table that represents the grid cells within a div with > overflow:auto set and it scrolls. However, IE and FF seem to calculate the > width differently in regard to the scrollbars that appear. The result is > that > the table used to represent the header of the grid becomes misaligned from > the > table that represents the cells of the grid. I'd rather not use a 3rd party > table if I don't have to... > > Here's a sample: > http://leebo.dreamhosters.com/misc/test.htm > > Any pointers?
Have you considered a scrolling header instead of the table? You might put the _whole_ table into scrolling div. Divide the table to <thead class="mainHeader"></thead> and <tbody></t body> sections (or any number of tbodys). Then, with javascript create another table, place it just before your table in the DOM. Copy the whole thead.mainHeader into the new table and copy all the widths and heingts, and styles of it. The table should be z-indexed +1 to the original table, and absolutly positioned, and the containing scrolling div should be relatively positioned. Then, observe the scroll event, and change the "top" style of your new table accordingly. Also observe resize events, and recopy the gathered widths and heights (or recopy whole header). This way, you have always visible table header, and no problems with scroll bars. This works great for me in firefox, on intranet. Can't post the source though, cause my contract forbids me :( We had many trys with your concept of scrolling tbody, but none worked well. Best Regards, SWilk --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~----------~----~----~----~------~----~------~--~---
