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 188.8.131.52,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:
The script could be better optimised, but for demonstration the code is easy enough to follow:
Freezer: Works great, thankou!
Will: Updated to version 1.1 for better layout within a scrollable div using custom horizontal and verticle scrollbars.
excel: hi, great thanx.
Andrei: And also, if I want to start scrolling from second column, what should I modify? var myCol=2; ?
Will: Don't know about your first question.
Andrei: I solved it :) Thanks.
J_P: you have a nice piece of code here.
Peter: i have tables in a for loop and how to set the table id ?
Suren: Its cool working gud but not working for multiple tables .what should i modify to make it work for multiple talbes?? thanks in advance
Will: @Suren, Sorry, i only designed for 1 table. You could however dupliate the functions and variable using different names and pass different table Id attribute.
peter: <%for offtake_sku in @offtake_skus%>
peter: <%for i in 1..5%> instead of <%for offtake_sku in @offtake_skus%>
Will: 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: 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
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