Current location: Hot Scripts Forums » General Community » Script Requests » Freeze columns in a table


Freeze columns in a table

Reply
 
LinkBack Thread Tools Display Modes
  #1 (permalink)  
Old 09-01-09, 05:44 AM
Rita Negi Rita Negi is offline
New Member
  
Join Date: Sep 2009
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Freeze columns in a table
Hi All,
I am looking for a javascript code which freezes the table columns.This is similar to the freeze pane functionality in MS Excel.
Kindly help
It's urgent!!!
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #2 (permalink)  
Old 09-01-09, 09:23 AM
job0107's Avatar
job0107 job0107 is offline
Community Liaison
  
Join Date: Dec 2006
Location: Tacoma, Washington USA
Posts: 3,454
Thanks: 0
Thanked 140 Times in 137 Posts
This will freeze the column headers at the top when you scroll the document.
Example:
HTML Code:
<html>
<head>
<title></title>
<script>
function scroll_header()
{
 var scrOfY = 0;
 if(typeof(window.pageYOffset) == 'number')
 {
  //Netscape compliant
  scrOfY = window.pageYOffset;
  }
 else if(document.body && document.body.scrollTop)
 {
  //DOM compliant
  scrOfY = document.body.scrollTop;
  }
 else if(document.documentElement && document.documentElement.scrollTop)
 {
  //IE6 standards compliant mode
  scrOfY = document.documentElement.scrollTop;
  }
 document.getElementById('header').style.top=scrOfY;
 }
</script>
</head>
<body onscroll="scroll_header();" style="margin:0px;">
<div id="header" style="width:850px;position:absolute;top:0px;background:#fff;z-index:1;">
 <table border="1" style="background:#ccc;">
  <tr>
   <th width="100px">First Name</th>
   <th width="100px">Last Name</th>
   <th width="100px">Address 1</th>
   <th width="100px">Address 2</th>
   <th width="75px">City</th>
   <th width="75px">State</th>
   <th width="75px">Zip Code</th>
   <th width="75px">Phone</th>
   <th width="75px">Email</th>
  </tr>
 </table>
</div>
<div style="position:absolute;top:25px;height:900px;width:850px;overflow:auto;z-index:0;">
 <table border="1">
  <tr>
   <td width="100px">First Name</td>
   <td width="100px">Last Name</td>
   <td width="100px">Address 1</td>
   <td width="100px">Address 2</td>
   <td width="75px">City</td>
   <td width="75px">State</td>
   <td width="75px">Zip Code</td>
   <td width="75px">Phone</td>
   <td width="75px">Email</td>
  </tr>
  <tr>
   <td width="100px">First Name</td>
   <td width="100px">Last Name</td>
   <td width="100px">Address 1</td>
   <td width="100px">Address 2</td>
   <td width="75px">City</td>
   <td width="75px">State</td>
   <td width="75px">Zip Code</td>
   <td width="75px">Phone</td>
   <td width="75px">Email</td>
  </tr>
  <tr>
   <td width="100px">First Name</td>
   <td width="100px">Last Name</td>
   <td width="100px">Address 1</td>
   <td width="100px">Address 2</td>
   <td width="75px">City</td>
   <td width="75px">State</td>
   <td width="75px">Zip Code</td>
   <td width="75px">Phone</td>
   <td width="75px">Email</td>
  </tr>
  <tr>
   <td width="100px">First Name</td>
   <td width="100px">Last Name</td>
   <td width="100px">Address 1</td>
   <td width="100px">Address 2</td>
   <td width="75px">City</td>
   <td width="75px">State</td>
   <td width="75px">Zip Code</td>
   <td width="75px">Phone</td>
   <td width="75px">Email</td>
  </tr>
  <tr>
   <td width="100px">First Name</td>
   <td width="100px">Last Name</td>
   <td width="100px">Address 1</td>
   <td width="100px">Address 2</td>
   <td width="75px">City</td>
   <td width="75px">State</td>
   <td width="75px">Zip Code</td>
   <td width="75px">Phone</td>
   <td width="75px">Email</td>
  </tr>
  <tr>
   <td width="100px">First Name</td>
   <td width="100px">Last Name</td>
   <td width="100px">Address 1</td>
   <td width="100px">Address 2</td>
   <td width="75px">City</td>
   <td width="75px">State</td>
   <td width="75px">Zip Code</td>
   <td width="75px">Phone</td>
   <td width="75px">Email</td>
  </tr>
  <tr>
   <td width="100px">First Name</td>
   <td width="100px">Last Name</td>
   <td width="100px">Address 1</td>
   <td width="100px">Address 2</td>
   <td width="75px">City</td>
   <td width="75px">State</td>
   <td width="75px">Zip Code</td>
   <td width="75px">Phone</td>
   <td width="75px">Email</td>
  </tr>
  <tr>
   <td width="100px">First Name</td>
   <td width="100px">Last Name</td>
   <td width="100px">Address 1</td>
   <td width="100px">Address 2</td>
   <td width="75px">City</td>
   <td width="75px">State</td>
   <td width="75px">Zip Code</td>
   <td width="75px">Phone</td>
   <td width="75px">Email</td>
  </tr>
  <tr>
   <td width="100px">First Name</td>
   <td width="100px">Last Name</td>
   <td width="100px">Address 1</td>
   <td width="100px">Address 2</td>
   <td width="75px">City</td>
   <td width="75px">State</td>
   <td width="75px">Zip Code</td>
   <td width="75px">Phone</td>
   <td width="75px">Email</td>
  </tr>
  <tr>
   <td width="100px">First Name</td>
   <td width="100px">Last Name</td>
   <td width="100px">Address 1</td>
   <td width="100px">Address 2</td>
   <td width="75px">City</td>
   <td width="75px">State</td>
   <td width="75px">Zip Code</td>
   <td width="75px">Phone</td>
   <td width="75px">Email</td>
  </tr>
  <tr>
   <td width="100px">First Name</td>
   <td width="100px">Last Name</td>
   <td width="100px">Address 1</td>
   <td width="100px">Address 2</td>
   <td width="75px">City</td>
   <td width="75px">State</td>
   <td width="75px">Zip Code</td>
   <td width="75px">Phone</td>
   <td width="75px">Email</td>
  </tr>
  <tr>
   <td width="100px">First Name</td>
   <td width="100px">Last Name</td>
   <td width="100px">Address 1</td>
   <td width="100px">Address 2</td>
   <td width="75px">City</td>
   <td width="75px">State</td>
   <td width="75px">Zip Code</td>
   <td width="75px">Phone</td>
   <td width="75px">Email</td>
  </tr>
  <tr>
   <td width="100px">First Name</td>
   <td width="100px">Last Name</td>
   <td width="100px">Address 1</td>
   <td width="100px">Address 2</td>
   <td width="75px">City</td>
   <td width="75px">State</td>
   <td width="75px">Zip Code</td>
   <td width="75px">Phone</td>
   <td width="75px">Email</td>
  </tr>
  <tr>
   <td width="100px">First Name</td>
   <td width="100px">Last Name</td>
   <td width="100px">Address 1</td>
   <td width="100px">Address 2</td>
   <td width="75px">City</td>
   <td width="75px">State</td>
   <td width="75px">Zip Code</td>
   <td width="75px">Phone</td>
   <td width="75px">Email</td>
  </tr>
  <tr>
   <td width="100px">First Name</td>
   <td width="100px">Last Name</td>
   <td width="100px">Address 1</td>
   <td width="100px">Address 2</td>
   <td width="75px">City</td>
   <td width="75px">State</td>
   <td width="75px">Zip Code</td>
   <td width="75px">Phone</td>
   <td width="75px">Email</td>
  </tr>
  <tr>
   <td width="100px">First Name</td>
   <td width="100px">Last Name</td>
   <td width="100px">Address 1</td>
   <td width="100px">Address 2</td>
   <td width="75px">City</td>
   <td width="75px">State</td>
   <td width="75px">Zip Code</td>
   <td width="75px">Phone</td>
   <td width="75px">Email</td>
  </tr>
  <tr>
   <td width="100px">First Name</td>
   <td width="100px">Last Name</td>
   <td width="100px">Address 1</td>
   <td width="100px">Address 2</td>
   <td width="75px">City</td>
   <td width="75px">State</td>
   <td width="75px">Zip Code</td>
   <td width="75px">Phone</td>
   <td width="75px">Email</td>
  </tr>
  <tr>
   <td width="100px">First Name</td>
   <td width="100px">Last Name</td>
   <td width="100px">Address 1</td>
   <td width="100px">Address 2</td>
   <td width="75px">City</td>
   <td width="75px">State</td>
   <td width="75px">Zip Code</td>
   <td width="75px">Phone</td>
   <td width="75px">Email</td>
  </tr>
  <tr>
   <td width="100px">First Name</td>
   <td width="100px">Last Name</td>
   <td width="100px">Address 1</td>
   <td width="100px">Address 2</td>
   <td width="75px">City</td>
   <td width="75px">State</td>
   <td width="75px">Zip Code</td>
   <td width="75px">Phone</td>
   <td width="75px">Email</td>
  </tr>
  <tr>
   <td width="100px">First Name</td>
   <td width="100px">Last Name</td>
   <td width="100px">Address 1</td>
   <td width="100px">Address 2</td>
   <td width="75px">City</td>
   <td width="75px">State</td>
   <td width="75px">Zip Code</td>
   <td width="75px">Phone</td>
   <td width="75px">Email</td>
  </tr>
  <tr>
   <td width="100px">First Name</td>
   <td width="100px">Last Name</td>
   <td width="100px">Address 1</td>
   <td width="100px">Address 2</td>
   <td width="75px">City</td>
   <td width="75px">State</td>
   <td width="75px">Zip Code</td>
   <td width="75px">Phone</td>
   <td width="75px">Email</td>
  </tr>
  <tr>
   <td width="100px">First Name</td>
   <td width="100px">Last Name</td>
   <td width="100px">Address 1</td>
   <td width="100px">Address 2</td>
   <td width="75px">City</td>
   <td width="75px">State</td>
   <td width="75px">Zip Code</td>
   <td width="75px">Phone</td>
   <td width="75px">Email</td>
  </tr>
  <tr>
   <td width="100px">First Name</td>
   <td width="100px">Last Name</td>
   <td width="100px">Address 1</td>
   <td width="100px">Address 2</td>
   <td width="75px">City</td>
   <td width="75px">State</td>
   <td width="75px">Zip Code</td>
   <td width="75px">Phone</td>
   <td width="75px">Email</td>
  </tr>
  <tr>
   <td width="100px">First Name</td>
   <td width="100px">Last Name</td>
   <td width="100px">Address 1</td>
   <td width="100px">Address 2</td>
   <td width="75px">City</td>
   <td width="75px">State</td>
   <td width="75px">Zip Code</td>
   <td width="75px">Phone</td>
   <td width="75px">Email</td>
  </tr>
  <tr>
   <td width="100px">First Name</td>
   <td width="100px">Last Name</td>
   <td width="100px">Address 1</td>
   <td width="100px">Address 2</td>
   <td width="75px">City</td>
   <td width="75px">State</td>
   <td width="75px">Zip Code</td>
   <td width="75px">Phone</td>
   <td width="75px">Email</td>
  </tr>
  <tr>
   <td width="100px">First Name</td>
   <td width="100px">Last Name</td>
   <td width="100px">Address 1</td>
   <td width="100px">Address 2</td>
   <td width="75px">City</td>
   <td width="75px">State</td>
   <td width="75px">Zip Code</td>
   <td width="75px">Phone</td>
   <td width="75px">Email</td>
  </tr>
  <tr>
   <td width="100px">First Name</td>
   <td width="100px">Last Name</td>
   <td width="100px">Address 1</td>
   <td width="100px">Address 2</td>
   <td width="75px">City</td>
   <td width="75px">State</td>
   <td width="75px">Zip Code</td>
   <td width="75px">Phone</td>
   <td width="75px">Email</td>
  </tr>
  <tr>
   <td width="100px">First Name</td>
   <td width="100px">Last Name</td>
   <td width="100px">Address 1</td>
   <td width="100px">Address 2</td>
   <td width="75px">City</td>
   <td width="75px">State</td>
   <td width="75px">Zip Code</td>
   <td width="75px">Phone</td>
   <td width="75px">Email</td>
  </tr>
  <tr>
   <td width="100px">First Name</td>
   <td width="100px">Last Name</td>
   <td width="100px">Address 1</td>
   <td width="100px">Address 2</td>
   <td width="75px">City</td>
   <td width="75px">State</td>
   <td width="75px">Zip Code</td>
   <td width="75px">Phone</td>
   <td width="75px">Email</td>
  </tr>
  <tr>
   <td width="100px">First Name</td>
   <td width="100px">Last Name</td>
   <td width="100px">Address 1</td>
   <td width="100px">Address 2</td>
   <td width="75px">City</td>
   <td width="75px">State</td>
   <td width="75px">Zip Code</td>
   <td width="75px">Phone</td>
   <td width="75px">Email</td>
  </tr>
  <tr>
   <td width="100px">First Name</td>
   <td width="100px">Last Name</td>
   <td width="100px">Address 1</td>
   <td width="100px">Address 2</td>
   <td width="75px">City</td>
   <td width="75px">State</td>
   <td width="75px">Zip Code</td>
   <td width="75px">Phone</td>
   <td width="75px">Email</td>
  </tr>
  <tr>
   <td width="100px">First Name</td>
   <td width="100px">Last Name</td>
   <td width="100px">Address 1</td>
   <td width="100px">Address 2</td>
   <td width="75px">City</td>
   <td width="75px">State</td>
   <td width="75px">Zip Code</td>
   <td width="75px">Phone</td>
   <td width="75px">Email</td>
  </tr>
  <tr>
   <td width="100px">First Name</td>
   <td width="100px">Last Name</td>
   <td width="100px">Address 1</td>
   <td width="100px">Address 2</td>
   <td width="75px">City</td>
   <td width="75px">State</td>
   <td width="75px">Zip Code</td>
   <td width="75px">Phone</td>
   <td width="75px">Email</td>
  </tr>
  <tr>
   <td width="100px">First Name</td>
   <td width="100px">Last Name</td>
   <td width="100px">Address 1</td>
   <td width="100px">Address 2</td>
   <td width="75px">City</td>
   <td width="75px">State</td>
   <td width="75px">Zip Code</td>
   <td width="75px">Phone</td>
   <td width="75px">Email</td>
  </tr>
  <tr>
   <td width="100px">First Name</td>
   <td width="100px">Last Name</td>
   <td width="100px">Address 1</td>
   <td width="100px">Address 2</td>
   <td width="75px">City</td>
   <td width="75px">State</td>
   <td width="75px">Zip Code</td>
   <td width="75px">Phone</td>
   <td width="75px">Email</td>
  </tr>
  <tr>
   <td width="100px">First Name</td>
   <td width="100px">Last Name</td>
   <td width="100px">Address 1</td>
   <td width="100px">Address 2</td>
   <td width="75px">City</td>
   <td width="75px">State</td>
   <td width="75px">Zip Code</td>
   <td width="75px">Phone</td>
   <td width="75px">Email</td>
  </tr>
  <tr>
   <td width="100px">First Name</td>
   <td width="100px">Last Name</td>
   <td width="100px">Address 1</td>
   <td width="100px">Address 2</td>
   <td width="75px">City</td>
   <td width="75px">State</td>
   <td width="75px">Zip Code</td>
   <td width="75px">Phone</td>
   <td width="75px">Email</td>
  </tr>
  <tr>
   <td width="100px">First Name</td>
   <td width="100px">Last Name</td>
   <td width="100px">Address 1</td>
   <td width="100px">Address 2</td>
   <td width="75px">City</td>
   <td width="75px">State</td>
   <td width="75px">Zip Code</td>
   <td width="75px">Phone</td>
   <td width="75px">Email</td>
  </tr>
  <tr>
   <td width="100px">First Name</td>
   <td width="100px">Last Name</td>
   <td width="100px">Address 1</td>
   <td width="100px">Address 2</td>
   <td width="75px">City</td>
   <td width="75px">State</td>
   <td width="75px">Zip Code</td>
   <td width="75px">Phone</td>
   <td width="75px">Email</td>
  </tr>
  <tr>
   <td width="100px">First Name</td>
   <td width="100px">Last Name</td>
   <td width="100px">Address 1</td>
   <td width="100px">Address 2</td>
   <td width="75px">City</td>
   <td width="75px">State</td>
   <td width="75px">Zip Code</td>
   <td width="75px">Phone</td>
   <td width="75px">Email</td>
  </tr>
 </table>
</div>
</body>
</html>
__________________
Jerry Broughton
Last edited by job0107; 09-01-09 at 09:26 AM.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
Reply

Bookmarks

« Browser Update Script | Searching For A Script »

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Create dynamic rows and columns in html using data from MYSQL table paligron PHP 5 09-17-11 02:47 AM
MYSQL database countll Database 2 06-19-07 05:20 PM
What do you think of my database structure? Oskare100 Database 5 12-27-06 08:43 AM
Creating a dynamic table with 3 columns per row Rahil PHP 4 08-10-06 04:15 AM
Pretty simple ( i think) question any help!?!? 0o0o0 PHP 2 04-07-06 11:47 AM


All times are GMT -5. The time now is 04:47 PM.
vBulletin® Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.