Coast Worx Internet Services

• Freeze Panes Table
• Dynamic Table
• Book Flip JavaScript
• Free PHP Web Site
• Downloads - Scripts

• Text-It engine - Online graphics generator
• Quality ASP Host - HostHombre.com
• ASP Web Development
• ASP Classifieds Script

All scripts are licenced:
Creative Commons 3.0 -NonCommercial

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:

<script type="text/javascript"> var myRow=1; var myCol=1; var myTable; var noRows; var myCells,ID; function setUp(){ if(!myTable){myTable=document.getElementById("t1");} myCells = myTable.rows[0].cells.length; noRows=myTable.rows.length; for( var x = 0; x < myTable.rows[0].cells.length; x++ ) { colWdth=myTable.rows[0].cells[x].offsetWidth; myTable.rows[0].cells[x].setAttribute("width",colWdth-4); } } function right(up){ if(up){window.clearTimeout(ID);return;} if(!myTable){setUp();} if(myCol<(myCells)){ for( var x = 0; x < noRows; x++ ) { myTable.rows[x].cells[myCol].style.display=""; } if(myCol >1){myCol--;} ID = window.setTimeout('right()',100); } } function left(up){ if(up){window.clearTimeout(ID);return;} if(!myTable){setUp();} if(myCol<(myCells-1)){ for( var x = 0; x < noRows; x++ ) { myTable.rows[x].cells[myCol].style.display="none"; } myCol++ ID = window.setTimeout('left()',100); } } function down(up){ if(up){window.clearTimeout(ID);return;} if(!myTable){setUp();} if(myRow<(noRows-1)){ myTable.rows[myRow].style.display="none"; myRow++ ; ID = window.setTimeout('down()',100); } } function upp(up){ if(up){window.clearTimeout(ID);return;} if(!myTable){setUp();} if(myRow<=noRows){ myTable.rows[myRow].style.display=""; if(myRow >1){myRow--;} ID = window.setTimeout('upp()',100); } } </script>