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

Will: Correct. If you have any doubt, send me an email outlining intended use.
(26.03.2009, 03:59)

danny: nice work dude...thanks
(09.04.2009, 04:48)

Ravikumar: Hi, i am doing freeze table with bit different, Can you help me.

I have a table like this:
Group1 Group2 Group3
G1-1 G1-2 G2-1 G2-2 G2-3 G3-1 G3-2
Left-1
Left-2
Left-3
.
.

Like above.
Here there is two levels of headings in the rows.
that mean: Group1 having G1-1, G1-2 two sub headings.


Hear i got two major problems:
1. i am not able to create freeze for both first and second rows.
(10.08.2009, 09:29)

Ravikumar: Hi
This article is very much helped me. And thanks for your work. I applied all the procedure describes in this article. But i have little bit different need.
that is,
1). I having two heading rows instead of one.
2). First row having some Group-1, Group-2....
3). Second row having Item-1, Item-2...Under Group-1 like that Item-3, Item-4, Item-5...Under Group-2....
4). And the First column Column heading having 'Product Name'
(10.08.2009, 23:50)

Ravikumar: Here some of the part i solved.
1). I done Two Row Heading. But the problem is when i press left and right buttons the order of first row and second row headings getting disorder.
2). And if i press the top/bottom buttons. the second row is not in freeze. it is not appearing.
I tried so much of time but not able to resolve yet. I think you understand my problem. Please give me your suggestion or solution to do solve above two problems.
(10.08.2009, 23:52)

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

Modify var freezeRow=2; //change to row to freeze at
var freezeCol=2; //change to column to freeze at
(11.08.2009, 21:04)

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?

Thanks!
(02.09.2009, 16:35)

Will: Jay, doesn't happen in the demo http://www.coastworx.com/freezepanes_table_scroll.html
Email me the url if you wish me to check it.
(03.09.2009, 09:02)

Mr. Alone: Hello.
Is there any way to start table not only from first row? I mean that sometimes it will be great to show table from ex. row 45 and still have possibility to scroll whole table.
(01.11.2009, 15:43)

Chiths: Not able to see the right scroll button in IE 7.0, but works for firefox
(08.02.2010, 01:19)

Abhinav: Hi Will,
Quite impressed by the code piece you have here. I have a slight issue. When I increase the number of columns in my table the div seems to forget that the overflow is hidden and seems to go above 80% width of page. Any solutions.
(28.03.2010, 10:31)

Will: It cannot forget, something you are introducing is not right. At what point are you increasing columns, check its before the js runs.
(28.03.2010, 21:29)

Abhinav: Hey Will,
Figured out the issue. It was due to me embedding my div within other controls. Thanks anyway
(05.04.2010, 07:14)

Abhinav: Hi Will,
If I have entry text boxes for the columns and I try to move through the columns using keyboard tabbing then the vertical scrollbar gets detached from the right of the div and moves inside the main div. Any ideas how to avoid this
(05.05.2010, 07:56)

Amit: Hi Guys, Great work done.Congrats.
I found one problem with this ,when some of cells in my table are blank then there is problem with scrolling.
Has anyone faced it?
(26.07.2010, 04:23)

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.
(08.09.2010, 13:49)

sharlin: it;s working Fine with me
(10.09.2010, 00:09)

cuma elp: i have a problem if the table has rowspan,does anyone experince the same problem as i did..?
(09.12.2010, 04:34)

Will: yes, it is not designed for rowspan or colspan.
(15.12.2010, 01:34)

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.
Also the arrow images in the vertical scroll bar are only 1/2 visible. They are shifted over to the right.
Any ideas?
(01.03.2011, 02:04)

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.
(02.03.2011, 07:23)

gfdos: I will be emailing you about some additions I have made extending this code, if you want to add them to this.
(11.03.2011, 08:41)

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!
(19.08.2011, 07:14)

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.
(20.08.2011, 10:46)

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..........
(20.10.2011, 04:20)

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.
(26.10.2011, 19:45)

Minh: Hi,Will.
I have solved rowspan, colspan and mouse wheel.
(18.12.2011, 19:13)

Anonym: I need the scrollbars to appear on the horizontal as well as vertical column. Someone please help. Its urgent...
(24.01.2012, 04:27)

sans: i want scroll bars to be visible, is it possible
its urgent
please help me out
(11.05.2012, 00:33)

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.
(13.05.2012, 02:24)

sati: i want scroll bars to be visible, is it possible
(09.01.2013, 23:00)

FSM: Hi Will, how do I get the scroll bars displayed i.e both horizontal and Vetical
(19.02.2013, 01:15)

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.
(28.02.2013, 01:11)

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?
(22.06.2013, 04:15)

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.
(26.06.2013, 09:23)

DJ: @Pavan,right click -> view source and you shall have it. Cheers.
(02.07.2013, 19:32)

PaVan G Jakati: Dj : THanks a lot
(08.07.2013, 05:14)

Van Rhodes: Hi Will, great app. Question: table width expands or shrinks based on width of the page, but height does not. How do I get height to do the same?
(02.01.2014, 15:12)

James: @Van. Just like any other html table it will not shrink or stretch to the height of the page But rather is dependent on the number of rows and the text size contained on those rows or the Row height. You could try setting the css for table rows to a certain pixel or percentage height and experiment with that.
(03.01.2014, 04:43)

coppi: I just could not leave your website before suggesting that I actually loved the usual info an individual provide for your visitors? Is gonna be back incessantly in order to inspect new posts
(22.02.2014, 15:13)

jglory: i want moving by drag event
(06.04.2014, 12:10)

sufian: it's helpful and nice. but if i want freeze right side column then what can i do ?
(08.04.2014, 02:15)

soutin: i would like to thanks to that. this allowed me to a lot with a venture i done. at the beginning my spouse and i tried just using simplexml to see any 400mb xml record along with well, php wasn't having your. right now it may develop 20k data files nevertheless it removes these people when it's done and every little thing is definitely performing fantastic. thanks!
(02.06.2014, 14:43)

Geeni: Hi,
When hold down the mouse to scroll on the vertical arrows and release, the scroll continues.

How do I get it to stop when the mouse is released?

Thank you.
(16.06.2014, 14:40)

muthu: Hi,for the horz scroll its not working ,i am getting java script error msg ,when i click the left button or right button .throwing style object not available ,can you help me on this
(01.07.2014, 13:25)

Steve: For any errors or unexpected behaviour please let me know what browser your using, the error msg, and if the same thing happens when using the stock script.
(03.07.2014, 20:49)

muthu: now its working fine for me .i need to enable scroll bar instead of vertical click button and hoz click button
(04.07.2014, 12:02)

frank: I use study some good stuff right here. Undoubtedly really worth book-marking regarding returning to. I actually ponder the amount of energy putting to produce a really magnificent useful web site.
(19.11.2014, 17:38)

atul: Works great on desktop. any way to make this code work in ipad ?
(26.06.2015, 13:52)

atul: code does not work on safari in ipad. Please let me know if any solution. thanks in advance.
(26.06.2015, 14:35)

50 of 77 comments (part 1) [ » ] [ * ]

Your comment:

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