• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1156
  • Last Modified:

Need table header row to scroll horizontally but not vertically

I need to create a table where the header row stays fixed if the user scrolls the table vertically, but the header rows stay with the column data if the table is scrolled horizontally.
<html>
<head>
 
<title>User List</title>
<style>
/* Div container to wrap the datagrid */
div#div-datagrid {
width: 900px;
height: 400px;
overflow: auto;
scrollbar-base-color:#ffeaff;
}
 
/* Locks the left column */
td.locked, th.locked {
font-size: 14px;
font-weight: bold;
text-align: center;
background-color: navy;
color: white;
border-right: 1px solid silver;
position:relative;
cursor: default;
/*IE5+ only*/
left: expression(document.getElementById("div-datagrid").scrollLeft-2);
}
 
/* Locks table header */
th {
font-size: 14px;
font-weight: bold;
text-align: center;
background-color: navy;
color: white;
border-right: 1px solid silver;
position:relative;
cursor: default;
overflow:scroll;
/*IE5+ only*/
top: expression(document.getElementById("div-datagrid").scrollTop-2);
z-index: 10;
 
}
 
/* Keeps the header as the top most item. Important for top left item*/
th.locked {z-index: 99;}
 
/* DataGrid Item and AlternatingItem Style*/
.GridRow {font-size: 10pt; color: black; font-family: Arial; 
             background-color:#ffffff; height:35px;}
.GridAltRow {font-size: 10pt; color: black; font-family: Arial; 
             background-color:#eeeeee; height:35px;}
			 
thead.fixedheader tr 
{ 
FONT: 10px Verdana, Helvetica, Arial, sans-serif; 
font-weight :bold; 
POSITION:relative; 
TOP:expression(this.offsetParent.scrollTop-3); 
 
 
} 
</style>
</head>
 <cfoutput>
 
<body>
<H1 align="center" style="color:##000099 " >User Access</h1>
<H2 align="center"  style="color:##000099 " >#form.schoolyear# School Year</h2>
<h3 align="center">#getDate.today#</h3>
 
<!--- <cfif len(getAuth.SCHNUM) GT 2 and len(getauth.schnum) LT 4>
	#getAuth.name#
<cfelse>
Select School:&nbsp;<select name="SelectSchool" onChange="this.form.submit()" >
          <option value=""></option>
		  <cfloop query="getSchools"> 
		<option value="#schoolnum#" <cfif isdefined('selectschool')><cfif selectschool eq "#schoolnum#">selected="#selectschool#"</cfif><cfelse><cfif isDefined('form.SelectSchool')><cfif form.SelectSchool eq "#schoolnum#">selected</cfif></cfif></cfif>>#name#</option>
            </cfloop> 
			</select>
</cfif> --->
 
<!--- <table  bordercolor="##FFFFFF" style="table-layout: fixed">
  <tr>
	<td width="25%">&nbsp;<strong>User Name Name</strong></td>
	<td width="30%">&nbsp;<strong>Applications</strong></td>
	<td width="45%">&nbsp;<strong>School Nums</strong></td>
  </tr>
 
 
  <cfloop query="getUsers">
  <tr<cfif (currentrow MOD 2) IS 1> bgcolor="EBEBEB"</cfif>>
  
 <td>&nbsp;#lastname#, #firstname#</td>
 
 <td>&nbsp;#applist#</td>
 <td><div style="width:250pt; word-wrap: break-word;"> &nbsp;#left(schnum,350)# </div></td>
</tr>
</cfloop>  
 
</table> 
addScrollSync(document.getElementById("div2"), document.getElementById("div1"), "both");--->
 
 
 
 
 
 
 
<div id="div-datagrid">
<table id="DataGrid1" width="900px"  cellspacing="2">
  <!---   <AlternatingItemStyle CssClass="GridAltRow"></AlternatingItemStyle>
    <ItemStyle CssClass="GridRow"></ItemStyle> --->
 
    <tr>
    <th align="center" nowrap class="locked" >&nbsp;</th> 
	  	  	<th valign="center" nowrap class="locked"><b>School Last Year</b></th>
	<th valign="center" nowrap class="locked"><b>Home School</b></th>
	<th valign="center" nowrap class="locked"><b>Enter Date</b></th>			
	<th valign="center" nowrap class="locked"><b>Exit Date</b></th>
    </tr>
	 <cfloop query="getStudents">
  <tr<cfif (currentrow MOD 2) IS 1> bgcolor="EEEEEE"</cfif>>
 
     <td nowrap><strong>#currentRow#.</strong></td> 
	 	     <td valign="center" nowrap>#schoolnamelastyear#</td>

Open in new window

0
ARC_08
Asked:
ARC_08
  • 5
  • 3
1 Solution
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
This is mine older code, it makes static both headers and two columns from left. Hope this code helps
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <script type="text/javascript">
 	function scroll(element)
	{
		var temp=document.getElementById('headers');
		temp.scrollLeft=element.scrollLeft;
		document.getElementById('fixed').scrollTop=element.scrollTop;
	}
	
 </script>
 
  </HEAD>
 <BODY>
 		<div style="position:absolute;height:20px;overflow:hidden;background-color:white">
		<table border="0" cellspacing="1" cellpadding="2" width="222">
			<tr bgcolor="#F5F5F5">
				<th>h1</th>
				<th>h2</th>
			</tr>
		</table>
		</div>
  	<div style="width:100%;height:20px;overflow:hidden;" id="headers">
		<table border="0" width="2000" cellspacing="1" cellpadding="2">
			<tr bgcolor="#F5F5F5">
				<th>h1</th>
				<th>h2</th>
				<th>h2</th>
				<th>h2</th>
				<th>h2</th>
				<th>h2</th>
				
				<th>h2</th>
				<th>h2</th>
				<th>h2</th>
				<th>h2</th>
				<th>h2</th>
				<th>h2</th>
 
				<th>h2</th>
				<th>h2</th>
				<th>h2</th>
				<th>h2</th>
				<th>h2</th>
				<th>h2</th>
				<th width="16px"></th>
			</tr>
		</table>
		</div>
		<div style="position:absolute;width: 222; height: 124px;overflow:hidden;background-color:white" id="fixed">
			<table border="0" cellspacing="1" cellpadding="2" width="222">
				<tr>
					<td>1</td>
					<td>1</td>
				</tr>
				<tr>
					<td>1</td>
					<td>1</td>
				</tr>
				<tr>
					<td>1</td>
					<td>1</td>
				</tr>
				<tr>
					<td>1</td>
					<td>1</td>
				</tr>
				<tr>
					<td>1</td>
					<td>1</td>
				</tr>
				<tr>
					<td>1</td>
					<td>1</td>
				</tr>
				<tr>
					<td>1</td>
					<td>1</td>
				</tr>
			</table>
 
		</div>
		<div style="width: 100%; height: 140px;overflow:auto" onscroll="scroll(this)">
			<table width="1980px" border="0" cellspacing="1" cellpadding="2">
				<tr>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
 
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
 
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>						
				</tr>
				<tr>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
 
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
 
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>						
				</tr>
				<tr>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
 
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
 
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>						
				</tr>
				<tr>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
 
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
 
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>						
				</tr>
				<tr>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
 
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
 
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>						
				</tr>
				<tr>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
 
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
 
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>						
				</tr>
				<tr>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
 
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
 
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>						
				</tr>
			</table>
		</div>
	</div>
 </BODY>
</HTML>

Open in new window

0
 
ARC_08Author Commented:
When I put in my own column headers, the data no longer lines up under the column header.  Is there a setting I need to adjust?  Thanks!
		</div>
  	<div style="width:100%;height:20px;overflow:hidden;" id="headers">
		<table border="0" width="2000" cellspacing="1" cellpadding="2">
			<tr bgcolor="#F5F5F5">
				<th>h1</th>
				<th>h2</th>
				<th>h2</th>
				<th>h2</th>
				<th>h2</th>
				<th>h2</th>
				
				<th>name</th>
				<th>date</th>
				<th>reason</th>
				<th>h2</th>
				<th>h2</th>
				<th>exit reason</th>

Open in new window

0
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
Oh you must understand that the code I gave you is split into 3 parts - table of headers that will be fixed in vertical, table of two columns that will be fixed horizontal, and a table of rest of data. If you need only vertical fix.. well - its simple. Just look at this concept:

<table> headers</table>
<div style="overflow-y:auto;overflow-x:hidden;width:500px;height:300px"> <table> data</table></div>

What it makes? it makes headers always fixed in vertical. Div with overflow makes second table put into scrollbars. I hope this cleans things a little.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
ARC_08Author Commented:
No, I need it to do what you originally gave me code for, but unless I put the column headers and column data within the same table, I'm having trouble lining up the column headers with the data.  I've tried adding width=x to <td> and <th> but that still didn't help.  I need the cell width to adjust to accomodate the data.  Sorry if I'm just not grasping the concept.
		<div style="position:absolute;height:20px;overflow:hidden;background-color:white">
		<table border="0" cellspacing="1" cellpadding="2" width="222">
			<tr bgcolor="#F5F5F5">
				<th>Student ID</th>
				<th>Last Name</th>
			</tr>
		</table>
		</div>
 
  <div style="width:100%;height:20px;overflow:hidden;" id="headers"> 	
		<table border="0" width="3500" cellspacing="1" cellpadding="2">
	
			<tr bgcolor="#F5F5F5">
				<th  nowrap>h1</th>
				<th  nowrap>h2</th>
				<th  nowrap>h3</th>
				<th  nowrap>h4</th>
				<th  nowrap>h5</th>
				<th  nowrap>h6</th>
				
				<th  nowrap>h2</th>
				<th  nowrap>h2</th>
				<th  nowrap>h2</th>
				<th  nowrap>h2</th>
				<th  nowrap>h2</th>
				<th  nowrap>h2</th>
				
 
				<th  nowrap>h2</th>
				<th  nowrap>h2</th>
				<th  nowrap>h2</th>
				<th  nowrap>h2</th>
				<th  nowrap>h2</th>
				<th  nowrap>h2</th>
				
			<!--- 	<th width="156px"></th> --->
			</tr>
		 </table> 
		</div> 
		 <div style="position:absolute;width: 222; height: 124px;overflow:hidden;background-color:white" id="fixed">
			<table border="0" cellspacing="1" cellpadding="2" width="222">
 
				<cfoutput query="getStudents">
				<tr>
					<td>#PERMNUM#</td>
					<td>#lastname#</td>
				</tr>
				</cfoutput>
			</table> 
 
		</div>
		<div style="width: 100%; height: 140px;overflow:auto;" onscroll="scroll(this)">
			<table width="3500" border="0" cellspacing="1" cellpadding="2">
				 <cfoutput query="getStudents">
				 
				<tr<cfif (currentrow MOD 2) IS 1> bgcolor="EEEEEE"</cfif>>
				<td ></td>
				<td ></td>
					<td valign="center"  >#schoolnamelastyear#</td>
   					<td valign="center"  >#NAME#</td>
					<td valign="center"  >#dateformat(ENtdATE, 'mm/dd/yyyy')#</td>
					<td valign="center"  >#dateformat(EXItdATE, 'mm/dd/yyyy')#&nbsp;</td>	
					<td valign="center" >#EXITreason#&nbsp;</td>	
					
 
					<td valign="center" >#pgmlevel#</td>
					<!--- <td >#PERMNUM#</td> --->
					<td >#lastname#</td>
					<td >#firstname#</td>
					<td >#grade#</td>
					<td >#instrset#</td>
					
 					<td >#MATQ1#</td>
					<td >#MATQ2#</td>
					<td >#MATQ3#</td>
					<td >#MATQ4#</td>
					<td >#ENGQ1#</td>
					<td >#ENGQ2#</td>
				</tr>		
				</cfoutput>
			</table>
		</div>

Open in new window

0
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
Im not sure did you nottice but there is javascript there, did you include it into your file ? (at the begining of mine code)
0
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
ahh i see problem :)
0
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
Ok so first problem i see here is that you put two first columns into normal data, and as you see this two columns are fixed when moving horizontally so you need add those information in section where there is <div id="fixed">. Second thing - u need to have the same count of elements in every row that are in headers (now you have 18 to 19). And last thing - the first header in "headers" section have to be empty, as it has to be in "data" section (over this td is shown this fixed one).
<script type="text/javascript">
 	function scroll(element)
	{
		var temp=document.getElementById('headers');
		temp.scrollLeft=element.scrollLeft;
		document.getElementById('fixed').scrollTop=element.scrollTop;
	}
	
 </script>
 
 
		<div style="position:absolute;height:20px;overflow:hidden;background-color:white">
		<table border="0" cellspacing="1" cellpadding="2" width="222">
			<tr bgcolor="#F5F5F5">
				<th>Student ID</th>
				<th>Last Name</th>
			</tr>
		</table>
		</div>
 
  <div style="width:100%;height:20px;overflow:hidden;" id="headers"> 	
		<table border="0" width="3500" cellspacing="1" cellpadding="2">
	
			<tr bgcolor="#F5F5F5">
				<th>h1</th>
				<th>h2</th>
				<th>h3</th>
				<th>h4</th>
				<th>h5</th>
				<th>h6</th>
				
				<th>h7</th>
				<th>h8</th>
				<th>h9</th>
				<th>h10</th>
				<th>h11</th>
				<th>h12</th>
				
 
				<th>h13</th>
				<th>h14</th>
				<th>h15</th>
				<th>h16</th>
				<th>h17</th>
				<th>h18</th>
				
			<!--- 	<th width="156px"></th> --->
			</tr>
		 </table> 
		</div> 
		 <div style="position:absolute;width: 222; height: 124px;overflow:hidden;background-color:white" id="fixed">
			<table border="0" cellspacing="1" cellpadding="2" width="222">
 
				<cfoutput query="getStudents">
				<tr>
					<td>#PERMNUM#</td>
					<td>#lastname#</td>
				</tr>
				</cfoutput>
			</table> 
 
		</div>
		<div style="width: 100%; height: 140px;overflow:auto;" onscroll="scroll(this)" id="data">
			<table width="3500" border="0" cellspacing="1" cellpadding="2">
				 <cfoutput query="getStudents">
				 	<td></td>
					<td valign="center"  >#schoolnamelastyear#</td>
   					<td valign="center"  >#NAME#</td>
					<td valign="center"  >#dateformat(ENtdATE, 'mm/dd/yyyy')#</td>
					<td valign="center"  >#dateformat(EXItdATE, 'mm/dd/yyyy')#&nbsp;</td>	
					<td valign="center" >#EXITreason#&nbsp;</td>	
					
 
					<td valign="center" >#pgmlevel#</td>
					<td >#PERMNUM#</td>
					<td >#lastname#</td>
					<td >#firstname#</td>
					<td >#grade#</td>
					<td >#instrset#</td>
					
 					<td >#MATQ1#</td>
					<td >#MATQ2#</td>
					<td >#MATQ3#</td>
					<td >#MATQ4#</td>
					<td >#ENGQ1#</td>
					<td >#ENGQ2#</td>
				</tr>		
				</cfoutput>
			</table>
		<script type="text/javascript">
			var source=document.getElementById('data').getElementsByTagName('table')[0].rows[0].cells;
			var destination=document.getElementById('headers').getElementsByTagName('table')[0].rows[0].cells;
			source[0].style.width=document.getElementById('fixed').style.width;
			for (var i=0;i<source.length;i++)
				{
					source[i].style.width=source[i].offsetWidth;
					destination[i].style.width=source[i].style.width;
 
				}
		</script>
		</div>
 

Open in new window

0
 
ARC_08Author Commented:
Thanks for your help!
0

Featured Post

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now