Vertical Fixed Headers For A Table When Body Scrolls, But Both Scroll Horizontally

[wongadob]

Hello all, I have a table that I want to have fixed headers when scrolling vertically and yet they scroll along with the body when scrolling horizontally. The data is too wide to fit within one screen, even on some of the larger resolution screens. it;s actual with is about 2400px. Firstly it is not actually one table, but two tables with identical formatting so that they can go into two divs. The top div which I want to stay static when scrolling verticallly and the bottom div which is relative. It all works lovely until I scroll horizontally. The bottom div obviously scrolls, but the top one does not. (because it is fixed) I have searched the internet and read many articles, but surprisingly non are doing what I want to do. There are plenty of examples of fixed windows, but non that are fixed in only 1 direction. I can't see how somebody somewhere has not wanted to do this, surely somebody must have big tables and would like their headers to always be visible. Please tell me I am being stupid and overlooking something. I have attached my CSS file and underneath there are details of the main ID's and what they are

#SuperFixedDiv {  position: fixed;  top: 0px;  left: 0px;  right: 0px;  min-width: 1024px;  z-index: 25;  background-color: #FFFFFF;   } #header {  border: 0px;  background-image: url("Art/Gradient-background-header.jpg");  background-repeat: repeat-y;  float: left;  width: 100%;  min-width: 1024px;  height: 5em;  margin: 0px;  padding: 0px;  clear: both;}#pagetitle {  float: left;  clear: left;  background-color: transparent;}#pagetitle h1{  font-family: "Verdana","Kalimati","Sans-serif";  font-weight: bold;  font-size: xx-large;  color: #ffffff;  padding: 4px;  margin: 0px;  } #companylogo {  float: right;  clear: right;  z-index: 50;  background-color: transparent;}#menu {  border: 0px;  background-color: #FFFFFF;  width: 100%;  min-width: 1024px;  height: 1em;  margin: 0px;  padding: 0px;  clear: both;}#menu ul {  margin-right: 0px;}#menu li {  list-style-type: none;  float: right;  width: 7em;  border: 0;}#menu a {  display: block;  border: 0;}#menu a img {  border: 0;}#menu a:active, a:link, a:hover, a:visited {  border: 0;} h1{  font-family: "Verdana","Kalimati","Sans-serif";  font-weight: bold;  font-size: x-large;  color: #ffffff;  padding: 2px;  margin: 0px;  } h2{  font-family: "Verdana","Kalimati","Sans-serif";  font-weight: bold;  font-size: large;  color: #000000;  padding: 0px;  margin: 0px;}  .tmainviewtable {	   background-color: #009EE0;  font-family: "Arial","Arial","Helvetica","Sans-serif";  font-size: medium;	    color: #FFFFFF;	    height: 3em;    width: 2500px;  min-width: 1024px;  max-width: 2500px;	    border-top: 1px black solid;	    border-bottom: 1px black solid;	  }	 .tloc {	    width: 110px;	    border-left: 1px black solid;	  }	 .tsite{	    width: 110px;	    border-left: 1px black solid;	  }	 .tbusunit {	    width: 180px;	    border-left: 1px black solid;	 }	 .titem {	    width: 200px;	    border-left: 1px black solid;	  }	 .taction {	    width: 200px;	    border-left: 1px black solid;	  }	 .tspecial {	    border-left: 1px black solid;	    width: 130px;	  }	 .tFM {	    width: 50px;	    border-left: 1px black solid;	  }	 .tcompliant {	    width: 90px;	    border-left: 1px black solid;	  }	 .tdatecomp {	    width: 120px;	    border-left: 1px black solid;	  }	 .tdatereview {	    width: 120px;	    border-left: 1px black solid;	  }	 .tfreq {	    width: 100px;	    border-left: 1px black solid;	  }	 .tremedial {	    width: 100px;	    border-left: 1px black solid;	  }	 .tcnw {	    width: 120px;	    border-left: 1px black solid;	  }	 .tcomments {	    width: 160px;	    border-left: 1px black solid;	  }	 .tinforce {	    width: 180px;	    border-left: 1px black solid;	  }	 .tlastchange {	    width: 180px;	    border-left: 1px black solid;	  }	 .tnotes {	    width: 180px;	    border-left: 1px black solid;	  }	 #bottomhalf {  position: relative;  top: 160px;  z-index: 0;  margin: 0;}.dmainviewtable {	   background-color: #CCCCFF;  font-family: "Arial","Arial","Helvetica","Sans-serif";	    font-size: small;    width: 2500px;  min-width: 1024px;  max-width: 2500px;	   color: #000000;	    height: auto;	    text-align: center;	    border: 1px white solid;	    border-collapse:collapse;		 	  }	 	  .dsitetitle {	   color: #FFFFFF;	   background-color: #9999CC;	   width: 100%;	   height: 2em;	   text-align: left;	   font-size: medium;	   font-weight: bold;		    border: 1px white solid;	    padding-bottom: 1px;	  }	 .dloc {	    width: 110px;	    border-left: 1px white solid;	    border-bottom: 1px white solid;	  }	 .dsite {	    width: 110px;	  border-left: 1px white solid;	    border-bottom: 1px white solid;	 	    }	 .dbusunit {	    width: 180px;	    border-left: 1px white solid;	    border-bottom: 1px white solid;	 	  }	 .ditem {	    width: 200px;	    text-align: left;	    border-left: 1px white solid;	    border-bottom: 1px white solid;	 	  }	 .daction {	    width: 200px;	    text-align: left;	    border-left: 1px white solid;	    border-bottom: 1px white solid;	 	  }	 .dspecial {	    width: 130px;	    border-left: 1px white solid;	    border-bottom: 1px white solid;	 	  }	 .dFM {	    width: 50px;	    border-left: 1px white solid;	    border-bottom: 1px white solid;	 	  }	 .dcompliant {	    width: 90px;	    border-left: 1px white solid;	    border-bottom: 1px white solid;	 	  }	 .ddatecomp {	    width: 120px;	    border-left: 1px white solid;	    border-bottom: 1px white solid;	 	  }	 .ddatereview {	    width: 120px;	    border-left: 1px white solid;	    border-bottom: 1px white solid;	 	  }	 .dfreq {	    width: 100px;	    border-left: 1px white solid;	    border-bottom: 1px white solid;	 	  }	 .dremedial {	    width: 100px;	    border-left: 1px white solid;	    border-bottom: 1px white solid;	 	  }	 .dcnw {	    width: 120px;	    border-left: 1px white solid;	    border-bottom: 1px white solid;	 	  }	 .dcomments {	    width: 160px;	    text-align: left;	    border-left: 1px white solid;	    border-bottom: 1px white solid;	 	  }	 .dinforce {	    width: 180px;	    text-align: left;	    border-left: 1px white solid;	    border-bottom: 1px white solid;	 	  }	 .dlastchange {	    width: 180px;	    text-align: left;	    border-left: 1px white solid;	    border-bottom: 1px white solid;	 	  }	 .dnotes {	    width: 180px;	    text-align: left;	    border-left: 1px white solid;	    border-right: 1px white solid;	    border-bottom: 1px white solid;	 	  }

The main sections areSuperFixedDev which is a container that holds all the bit that I want to be fixed. Within that II have header, pagetitle, logo, menu;s and the headers of the tablebottomhalf - This is a container that holds all the table rows that contain the data and all the sub column ID's that start .dxxxxxxx I think I may need to set up a 3rd dev for just the table headers that is some form of hybrid of the two, But a bit lost on this at the moment. Any help appreciated as always

[dsonesuk]

The only way I could get this to work cross browser was this method

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css">.table_wrapper {width:1024px; overflow-x:auto;}.table_inner{height:500px; overflow-y:auto; width:2021px;padding-bottom:60px;}	      	 .tloc {		    width: 110px;		    		  }		 .tsite{		    width: 110px;		  }		 .tbusunit {		    width: 180px;		 }		 .titem {		    width: 200px;		  }		 .taction {		    width: 200px;		  }		 .tspecial {		    width: 130px;		  }		 .tFM {		    width: 50px;		  }		 .tcompliant {		    width: 90px;		  }		 .tdatecomp {		    width: 120px;		  }		 .tdatereview {		    width: 120px;		  }		 .tfreq {		    width: 100px;		  }		 .tremedial {		    width: 100px;		  }		 .tcnw {		    width: 120px;		  }		 .tcomments {		    width: 160px;		  }		 .tinforce {		    width: 180px;		  }		 .tlastchange {		    width: 180px;		  }		 .tnotes {		    width: 180px;		  }</style><!--[if lte IE 7]> <style>  .table_wrapper{overflow-y:hidden;} </style><![endif]--><!--[if IE 8]> <style>  .table_inner table{ padding-bottom:60px;} </style><![endif]--></head><body><div class="table_wrapper"><table width="2004" border="1" cellspacing="0" cellpadding="0"> <tr>    <td class="tloc">first head</td>    <td class="tsite">head</td>    <td class="tbusunit">head</td>    <td class="titem">head</td>    <td class="taction">head</td>    <td class="tspecial">head</td>    <td class="tFM"> </td>    <td class="tcompliant">head</td>    <td class="tdatereview">head</td>    <td class="tfreq">head</td>    <td class="tremedial">head</td>    <td class="tcnw ">head</td>    <td class="tcomments">head</td>    <td class="tinforce">head</td>    <td class="tlastchange">head</td>  <td class="tnotes">last head</td> </tr> </table>  <div class="table_inner">  <table width="2004" border="1" cellspacing="0" cellpadding="0">	 <tr bgcolor="#CCFFCC">    <td class="tloc">first rec</td>    <td class="tsite"> </td>    <td class="tbusunit"> </td>    <td class="titem"> </td>    <td class="taction"> </td>    <td class="tspecial"> </td>    <td class="tFM"> </td>    <td class="tcompliant"> </td>    <td class="tdatereview"> </td>    <td class="tfreq"> </td>    <td class="tremedial"> </td>    <td class="tcnw "> </td>    <td class="tcomments"> </td>    <td class="tinforce"> </td>    <td class="tlastchange"> </td>  <td class="tnotes">last rec</td>  </tr>  <tr>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>  <td> </td>  </tr>  <tr>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>  <td> </td>  </tr>  <tr>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>  <td> </td>  </tr>  <tr>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>  <td> </td>  </tr>  <tr>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>  <td> </td>  </tr>  <tr>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>  <td> </td>  </tr>  <tr>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>  <td> </td>  </tr></table></div></div></body></html>

With the usual conditional fixes for crappy IE. Note: not tested in IE9.

[wongadob]

Sorry to take so long to get back on this one. I did try the theories you suggested here, but cannot get them to work with mine. However I did notice that your headings are not fixed in the Y which is really important as that is why I wanted to do the fixed header in the first place so that the table headings always stay on the screen when scrolling in the Y. So the user always knows what the heading is. Any further thoughts on this one? Thanks

[dsonesuk]

??? I think you will they are fixed, IF the content data exceeds the height set for .table_inner

[wongadob]

I have copied and pasted into a txt doc named test.html and it does not fix the top headers in the Y. Works fine in the X as I would like it to, but the headers are not fixed in the X. I have tried in Mozilla, IE & Chrome same result. All I have done is a straight copy and paste. No edits. Then after that did not work uncommented in IE 8 mods and same result? Do you think it would be possible to do in Javascript? Hide header div scroll bar, but then set based on bottom div scrollbar location. Can you even do that. is there a javascript event that is called each frame or an event that is called when a scrollbar is scrolled? Ta

Edited November 13, 2011 by wongadob

[dsonesuk]

Must be my PC and browsers then? getting a lot of that here recently, guess I'm a lucky chappy, cause the headers fixed on mine.

Edited November 13, 2011 by dsonesuk

[wongadob]

Hmm, What do you think about the Javascript idea? I have had a bit of a dig and it seems possible.

[wongadob]

Test.html @dsonesuk I have given it another bash and still get the same results. As I say tried in all browsers I have. IE9, Firefox 7.1, Chrome 15.0.874.120m (strange version no?). I also tried all IE version number if defs that you highlighted. Hmmm. I feel I might have to use the Javascript approach if viable. I have attached the file, would you be so kind to give it a whirl to see if it works on yours or am I doing some strange shinanigans. BTW it does kind of work sometimes, when you boot it up the headers are fixed for a few seconds then if you are moving up and down it stops working. This is only for a very small amount of time (working). Edited November 14, 2011 by wongadob

[dsonesuk]

Works fine on mine, as soon as i reduce the height of table_inner div so the data content is greater than that element height, so can scroll the data content, and the header is fixed!

[Nataly®]

Hello, I've just signed in to thank you very much dsonesuk!I spent severals days figthing with an array to try to accomplish this, found several solutions on the web with dozen of lines of javascript and css, and finally i found this thread.With only 2 divs well placed and 2 or 3 css commands, it's just perfect.A huge thank you :0)