Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Need table header row to scroll horizontally but not vertically

Posted on 2008-10-27
8
1,150 Views
Last Modified: 2010-04-21
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
Comment
Question by:ARC_08
  • 5
  • 3
8 Comments
 
LVL 18

Expert Comment

by:Pawel Witkowski
ID: 22812949
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
 

Author Comment

by:ARC_08
ID: 22814796
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
 
LVL 18

Expert Comment

by:Pawel Witkowski
ID: 22819730
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
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 

Author Comment

by:ARC_08
ID: 22820955
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
 
LVL 18

Expert Comment

by:Pawel Witkowski
ID: 22829231
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
 
LVL 18

Expert Comment

by:Pawel Witkowski
ID: 22829241
ahh i see problem :)
0
 
LVL 18

Accepted Solution

by:
Pawel Witkowski earned 250 total points
ID: 22829338
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
 

Author Closing Comment

by:ARC_08
ID: 31510315
Thanks for your help!
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Hide Table in merge 3 31
multiple selects 23 48
html border input line 7 13
what is the best Integrated development environment 2 20
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question