Articles

Links

All scripts are licenced:
Creative Commons 3.0 -NonCommercial

Valid HTML 4.01 Transitional


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.
On first glance one would think getting similar functionality to Microsoft Excel freeze panes in html would be quite easy to achieve with a little javascript.
Unfortunately I haven't found a good example yet that doesn't require massive blocks of javascript code.
Hopefully this example goes someway to achieving similar functionality without bloated code and css hacks.

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.
Here's the Freeze Panes DEMO (fairly large table for demo, over 1000 cells are in the table)

2nd March 2008:
Updated v1.1 Freeze panes table scrollable div layout.
Freeze Panes Scroll DEMO

Best performance for scrolling columns was with using Fire Fox and Opera, while IE was a little slow. Rows were about the same.
CPU usage may be worth noting while column scrolling. More buttons could be added for example to scroll to the first or last column or row directly similar to paging.

The script simply hides/unhides columns or rows using scrolling buttons:

<button title="Up" onmousedown="upp();" onmouseup="upp(1);">Up</button> <button title="Left" onmousedown="left();" onmouseup="left(1);">&lt;&lt;</button> <button title="Right" onmousedown="right();" onmouseup="right(1);">&gt;&gt;</button> <button title="Down" onmousedown="down();" onmouseup="down(1);">Dn</button> Naturally images can easily be used for a more attractive display.

Place the javascript function in either the head or body of your page.
Function: setUp() initializes the table the first time one of the buttons is clicked.
Make sure to modify

if(!myTable){myTable=document.getElementById("t1"); to match the id of your table if it is not "t1".
The script could be better optimised, but for demonstration the code is easy enough to follow:

Comments

Freezer: Works great, thankou!
(16.11.2007, 17:52)

Will: Updated to version 1.1 for better layout within a scrollable div using custom horizontal and verticle scrollbars.
http://coastworx.com/freezepanes_table_scroll.html
(01.03.2008, 08:49)

excel: hi, great thanx.
(21.09.2008, 19:40)

Andrei: I want to scroll left 3 columns at a time and I've studied your JavaScript code. I'm still confused about it. Can you tell me please what lines should I modify or what lines of code should I add ?
(16.10.2008, 10:40)

Andrei: And also, if I want to start scrolling from second column, what should I modify? var myCol=2; ?
(16.10.2008, 11:09)

Will: Don't know about your first question.
yep, set these variable to determine the freeze panes column and row position: var myRow=1; var myCol=1;
(17.10.2008, 07:08)

Andrei: I solved it :) Thanks.
For my first question, scrolling 3 columns at a time, I ve used something like :
myTable.rows[x].cells[myCol-1].style.display="";
myTable.rows[x].cells[myCol-2].style.display="";
myTable.rows[x].cells[myCol-3].style.display="";
in the right() function and I ve also modify the condition like
if( myCol >=4){
myCol=myCol-3;
}
Something similar in the left() JavaScript function.
(18.10.2008, 06:07)

J_P: you have a nice piece of code here.

There is however, a magic number of "1" .

Try to make an example of 3 fixed columns and scroll 5 columns at a time.
(05.02.2009, 12:54)

Peter: i have tables in a for loop and how to set the table id ?
(14.02.2009, 07:36)

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
(14.02.2009, 07:46)

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.
(15.02.2009, 02:46)

Will: @Peter, tables or rows? Using javascript you could set the table id using element.setAttribute("id","value")
(15.02.2009, 02:52)

peter: <%for offtake_sku in @offtake_skus%>
<table id="t<%=i>" border="0" cellspacing="1" cellpadding="3" bgcolor="lightgreen" >
<tr><td></td></tr>
</table>
<%end>
how can i set the table id dynamically if(!myTable){myTable=document.getElementById("id");}
(16.02.2009, 05:42)

peter: <%for i in 1..5%> instead of <%for offtake_sku in @offtake_skus%>
(16.02.2009, 05:45)

Will: Your code example doesn't make sense...i cannot guess.
It looks like classic ASP but incomplete and you are writing 5 tables which the script only supports one table per page currently. Maybe in future version i'll make support for multiple tables..
(16.02.2009, 06:40)

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
(16.02.2009, 22:54)

Will: Different browsers / different capabilities. You could try set a faster timeout speed by adjusting 100 in window.setTimeout().
(17.02.2009, 06:37)

Sham: I ve multiple link in single page and its working for first link, when i click remaining link its not working.
Is there any solution?
Thanks in advance
(18.02.2009, 01:29)

Will: Please see prev posts already on the subject of multiple tables.
(18.02.2009, 08:24)

dom: How to fix the first column width as a static size.
(24.02.2009, 08:22)

sunmeet: Is there a way to have both vertical and horizontal scrollbars alongwith the present functinality
(05.03.2009, 01:16)

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
(06.03.2009, 22:20)

Malvika: will ,Running this in IE ,
http://coastworx.com/freezepanes_table_scroll.html
doesn't render the horizontal scrollbar.
I mean it doesnt allow user to navigate to right.
(17.03.2009, 08:28)

Will: @Malvika: Works fine for me using IE7. Can you send a screen shot?
(18.03.2009, 09:10)

24 of 74 comments (part 2) [ « ] [ * ]

Your comment:

Name:
E-mail or homepage:
Enter Turning Number: