Solved

Need table header row to scroll horizontally but not vertically

Posted on 2008-10-27
8
1,148 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:wilq32
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:wilq32
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
 

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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 18

Expert Comment

by:wilq32
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:wilq32
ID: 22829241
ahh i see problem :)
0
 
LVL 18

Accepted Solution

by:
wilq32 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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
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…

744 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now