Thread: Freeze columns in a table
View Single Post
  #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.
Reply With Quote