Freeze Panes html table like excel
There are already a few scripts around that demonstrate how to freeze a HTML table top row and first column.
Most of these scripts are specific to Internet Explorer while a couple I have tried are cross browser compatible using CSS but require the column widths to be set to a specific width...for example all column widths must be set to 100px wide. This I also found not to be ideal because the columns hide any content that is wider than 100px and offered no way of adjusting the column widths to view the hidden data via an onscreen control....not ideal for dynamically created data from a database.
This example is perfect for tables containing large amounts of data and is cross browser compatable(tested IE6,IE7,Fire Fox 2.0.0.6,Opera 9.22)
and might be best employed using database recorset paging.
2nd March 2008:
Best performance for scrolling columns was with using Fire Fox and Opera, while IE was a little slow. Rows were about the same.
The script simply hides/unhides columns or rows using scrolling buttons:
Place the javascript function in either the head or body of your page.
The script could be better optimised, but for demonstration the code is easy enough to follow:
CommentsWill: Your code example doesn't make sense...i cannot guess.
Sham: its working gud in mozila firefox but some what slow in IE on first click. Is there any solution to make it work fast in IE Will: Different browsers / different capabilities. You could try set a faster timeout speed by adjusting 100 in window.setTimeout(). Sham: I ve multiple link in single page and its working for first link, when i click remaining link its not working.
Will: Please see prev posts already on the subject of multiple tables. dom: How to fix the first column width as a static size. sunmeet: Is there a way to have both vertical and horizontal scrollbars alongwith the present functinality Will: @sunmeet: when you say "both", do you men for example vertical scroll on left side of table in addition to right scroll bar and same for horizontal scroll? http://coastworx.com/freezepanes_table_scroll.html Malvika: will ,Running this in IE ,
Will: @Malvika: Works fine for me using IE7. Can you send a screen shot? Malvika: Hi Will, I would like to use your code logic for my Table.Does it come under any License agreements.I would be using the logic and modifying the code to suit my requirements.Can I use it Will: So long as its not commercialized you may use it freely. Malvika: Will, Do you mean this code cannot be used for commercial application ? Will: Correct. If you have any doubt, send me an email outlining intended use. danny: nice work dude...thanks Ravikumar: Hi, i am doing freeze table with bit different, Can you help me.
Ravikumar: Hi
Ravikumar: Here some of the part i solved.
Will: @Ravikumar: I'll be bringing out an updated version soon, in the mean time use the script from here:http://coastworx.com/freezepanes_table_scroll2.html
Jay: Will, quick question. When I scroll back up, any rows that I have had hidden through a javascript animated collapse are now showing. Do you know of any way to keep these hidden?
Will: Jay, doesn't happen in the demo http://www.coastworx.com/freezepanes_table_scroll.html
Mr. Alone: Hello.
Chiths: Not able to see the right scroll button in IE 7.0, but works for firefox Abhinav: Hi Will,
Will: It cannot forget, something you are introducing is not right. At what point are you increasing columns, check its before the js runs. Abhinav: Hey Will,
Abhinav: Hi Will,
Amit: Hi Guys, Great work done.Congrats.
Sundar: Yes I am having the same issue. The horizontal scroll bar doesn't work in IE 7. I don't see the 'right' arrow image, and the whole horizontal bar is unresponsive. sharlin: it;s working Fine with me cuma elp: i have a problem if the table has rowspan,does anyone experince the same problem as i did..? Will: yes, it is not designed for rowspan or colspan. Achieve: Where do you set the table width for your table? My table does not fit the screen, it is much wider, until I start scrolling to the right, then it shrinks. It also keeps on changing size when I scroll horizontally.
Will: Table width is not set, the browser determines it depending on content. Make sure you have a width & height for .div_freezepanes_wrapper & position is relative. As for arrows, would have to see but make sure your table is valid i.e equal number of cells in each row etc. gfdos: I will be emailing you about some additions I have made extending this code, if you want to add them to this. Kees: Great tool! One request: would it be possible to have a moveable button on the scroll bars that would show you whether you are at the beginning, the middle, or the end of the report? Thanks for the good work! Ziggy: Great tool indeed! and I second that request for a scroll indicator to tell us where we are in the table. Thanks for saving me countless hours of trying to figure this out by myself. Ravikant: My header comprises of two rows and having lots of colspan & rowspan in that, bcoz of this when i hide the column it doesnt move properly. can i hav solution pls.......... Will: @Hi, sorry, this is not designed work other than with standard htm table. i.e, no colspan or rowspan. A total change of concept is required to accomodate complex tables. Minh: Hi,Will.
Anonym: I need the scrollbars to appear on the horizontal as well as vertical column. Someone please help. Its urgent... sans: i want scroll bars to be visible, is it possible
Will: You need to provide a better description of the problem your having. Send me an example url and what browser your having the trouble with if u want me to take a look. sati: i want scroll bars to be visible, is it possible FSM: Hi Will, how do I get the scroll bars displayed i.e both horizontal and Vetical Will: Hi. How do you mean. They are virtual scroll bars. Basically a div and depending on what half of the div you click determines the scroll event. If its not showing up its probably a browser issue and the styling of the div needs to be adjusted accordingly. Nihal: I have issue with the scrolling speed. Sometimes all of table is getting scrolled to left/right in a single click only. And sometimes it works fine. Do we need to clear anything in the JS? Pavan G Jakati: Hi Will , I do see the script code which is showing the version two demo(http://coastworx.com/freezepanes_table_scroll2.html). Can you mail me that pls pls pls. DJ: @Pavan,right click -> view source and you shall have it. Cheers. PaVan G Jakati: Dj : THanks a lot 50 of 64 comments (part 1) [ » ] [ * ]
|