1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 10:37 am May 14, 2026

Forum Moderators: open

Message Too Old, No Replies

Desperately needed help with scrolling table problem

Am I missing something obvious?

         

camman

10:48 am on Oct 11, 2005 (gmt 0)

10+ Year Member



Hi guys,

Just wondered if anyone can help me with this.

My aim is to have a nice cross-browser compatible grid-like scrolling table, whereby if you move the horizontal scrollbar on the body of the table, the cells of the body synchronously move with the horizontal headers but the vertical headers remain static and vice versa for the vertical cells.

I have code that kind of works in IE (but not in others) that does just as outlined above but for some reason each of the table headers slides over the top of the "BUTTON" cell.

Can anyone help get this sorted ie so the headers slide *underneath* the "BUTTON" cell and maybe make the code a bit more cross-browser compatible?

Many many thanks in advance.
Here's the code:

<html>
<HEAD>
<style>
TD {width:100; height=50}
TH {width:100; height=50}
</style>
<script>
function sync()
{
var lft = document.getElementById("dvData").scrollLeft;
document.getElementById("dvHeader").style.width= 200+lft+'px';
document.getElementById("dvHeader").style.left= 100-lft+'px';
var top = document.getElementById("dvData").scrollTop;
document.getElementById("dvHeader2").style.height= 300+top+'px';
document.getElementById("dvHeader2").style.top = 50-top+'px';
}
</script>
</HEAD>
<body>
<div id="dvButton" style="position:absolute; left:0px; top:0px; height:50px; width:100px; overflow: hidden">
<table border=1 width="100px" title="Table Button">
<tr><th>BUTTON</th></tr>
</table>
</div>
<div id="dvHeader" style="position:absolute; left:100px; top:0px; height:50px; width:200px; overflow: hidden">
<table width="400px" border="1" title="Table Heading">
<tr><th>Heading</th><th>Heading2</th><th>Heading3</th><th>Heading4</th></tr>
</table>
</div>
<div id="dvHeader2" style="position:absolute; left:0px; top:50px; height:300px; width:100px; overflow: hidden">
<table width="100px" border="1" title="Table Heading2">
<tr><th>Row1</th></tr>
<tr><th>Row2</th></tr>
<tr><th>Row3</th></tr>
<tr><th>Row4</th></tr>
<tr><th>Row5</th></tr>
<tr><th>Row6</th></tr>
<tr><th>Row7</th></tr>
<tr><th>Row8</th></tr>
</table>
</div>
<div id="dvData" style="position:absolute; left:100px; top:50px; height:300px; width:200px; overflow: auto" onscroll="sync()">
<table width="400px" border="1" title="Table Body">
<tr><td>Item1</td><td>Item2</td><td>Item3</td><td>Item4</td></tr>
<tr><td>Item1</td><td>Item2</td><td>Item3</td><td>Item4</td></tr>
<tr><td>Item1</td><td>Item2</td><td>Item3</td><td>Item4</td></tr>
<tr><td>Item1</td><td>Item2</td><td>Item3</td><td>Item4</td></tr>
<tr><td>Item1</td><td>Item2</td><td>Item3</td><td>Item4</td></tr>
<tr><td>Item1</td><td>Item2</td><td>Item3</td><td>Item4</td></tr>
<tr><td>Item1</td><td>Item2</td><td>Item3</td><td>Item4</td></tr>
<tr><td>Item1</td><td>Item2</td><td>Item3</td><td>Item4</td></tr>
</table>
</div>
</body>
</html>

muneepenee

6:39 pm on Oct 11, 2005 (gmt 0)



<html>
<head>
<pre>
c:\web\jwerk1.htm Tuesdae, 11 Oct 05 at 1333
<! bakup...savwerk1.htm>
master post...skrolling tabel
<style>
TD {width:100; height=50}
TH {width:100; height=50}
</style>
<script language="JavaScript">
<!-- ***************** javaskript **************
var xoffset=100;
var yoffset=110;
var tabwide=200;
var tabhite=300;
//*
//************ funkshun
function sinkit(){
//******* wen skroll maen tabel left
var nowobj=document.getElementById("maentabel");
var leftmuch=nowobj.scrollLeft;
var downmuch=nowobj.scrollTop;
//* stringx=" sinkit, skrol left="+leftmuch+" down="+downmuch;
//* alert(stringx);
//**** muve top heder left
topobj=document.getElementById("tophed");
topobj.style.left=xoffset-leftmuch;
topobj.style.width=tabwide+leftmuch;
//**** muve left heder up-down
var lefthi=tabhite+downmuch-20;
//* stringx="lefthi="+lefthi;
//* alert(stringx);
leftobj=document.getElementById("leftkol");
leftobj.style.top =yoffset-downmuch;
leftobj.style.height=lefthi+'px';
}
//***** bottom av sinkit
// -->
</script>
<! ************************* html **********************>
</head>
<body>
<!******** 0...bakground tu kuver hed ends>
<div
style="position:absolute; left:0px; top:20px;
height:90px; width:330px;
z-index=1;
background-color:yellow">
</div>
<!******** 1...header for kolumn on left>
<div id="dvButton"
style="position:absolute; left:2px; top:60px;
height:50px; width:100px;
z-index=5;
background-color:white">
<table border=1 width="100px" title="Table Button">
<th>BUTTON</th>
</table>
</div>
<!******** 2...header tu go kross top>
<div id="tophed" style="position:absolute; left:102px; top:60px;
height:50px; width:200px; overflow: hidden;
z-index=2;">
<table width="400px" border="1" title="Table heading">
<th>heading 1</th><th>heading2</th><th>heading3</th><th>heading4</th>
</table>
</div>
<!******** 3...kolumn on left side>
<div id="leftkol" style="position:absolute; left:2px; top:110px;
height:300px; width:100px; overflow: hidden;
z-index=0;">
<table width="100px" border="1" title="Table heading2">
<tr><th>Row1</th></tr>
<tr><th>Row2</th></tr>
<tr><th>Row3</th></tr>
<tr><th>Row4</th></tr>
<tr><th>Row5</th></tr>
<tr><th>Row6</th></tr>
<tr><th>Row7</th></tr>
<tr><th>Row8</th></tr>
</table>
</div>
<!******** 4...maen tabel>
<div id="maentabel" style="position:absolute; left:100px; top:110px;
height:300px; width:200px;
overflow: auto;
z-index=2;"
onscroll="sinkit()">
<table width="400px" border="1" title="Table Body">
<tr><td>Item11</td><td>Item21</td><td>Item31</td><td>Item4</td></tr>
<tr><td>Item12</td><td>Item22</td><td>Item32</td><td>Item4</td></tr>
<tr><td>Item13</td><td>Item23</td><td>Item33</td><td>Item4</td></tr>
<tr><td>Item14</td><td>Item24</td><td>Item34</td><td>Item4</td></tr>
<tr><td>Item15</td><td>Item25</td><td>Item35</td><td>Item4</td></tr>
<tr><td>Item16</td><td>Item26</td><td>Item36</td><td>Item4</td></tr>
<tr><td>Item17</td><td>Item27</td><td>Item37</td><td>Item4</td></tr>
<tr><td>Item18</td><td>Item28</td><td>Item38</td><td>Item4</td></tr>
</table>
</div>
</body>
</html>

camman

11:27 am on Oct 12, 2005 (gmt 0)

10+ Year Member



Hi all,

Thanks to muneepenee for pointing out the usefulness of z-index on this one!

However the table I'm doing is going to be displayed half way down a page and although the cells do now slide under the BUTTON cell, unfortunately they pop out the other side! Is there any way of making the ones popping out the other side kinda disappear (but reappear once the row/column is scrolled back in to place again)?

Also this still isn't working in browsers other than IE, is there a good reason for this?

Below is the revised code for you to play with!

Again MANY MANY thanks in advance if anyone can help me out here.

<html>
<HEAD>
<style>
TD {width:100; height=50}
TH {width:100; height=50}
</style>
<script>

var xoffset=100;
var yoffset=70;
var tabwidth=200;
var tabheight=300;

function sync()
{

var datatableObj = document.getElementById("dvData");
var lft = datatableObj.scrollLeft;
var top = datatableObj.scrollTop;

var colheader = document.getElementById("dvHeader");
colheader.style.left= xoffset-lft;
colheader.style.width= tabwidth+lft;

var rowheader = document.getElementById("dvHeader2");
rowheader.style.height= tabheight+top;
rowheader.style.top = yoffset-top;

}

</script>
</HEAD>
<body>
<div id="dvButton" style="z-index=3; position:absolute; left:0px; top:20px; height:50px; width:100px; overflow: hidden; background-color:white">
<table border=1 width="100px" title="Table Button">
<th>BUTTON</th>
</table>
</div>
<div id="dvHeader" style="z-index=2; position:absolute; left:100px; top:20px; height:50px; width:200px; overflow: hidden">
<table width="400px" border="1" title="Table Heading">
<th>Heading</th><th>Heading2</th><th>Heading3</th><th>Heading4</th>
</table>
</div>
<div id="dvHeader2" style="z-index=1; position:absolute; left:0px; top:70px; height:300px; width:100px; overflow: hidden">
<table width="100px" border="1" title="Table Heading2">
<tr><th>Row1</th></tr>
<tr><th>Row2</th></tr>
<tr><th>Row3</th></tr>
<tr><th>Row4</th></tr>
<tr><th>Row5</th></tr>
<tr><th>Row6</th></tr>
<tr><th>Row7</th></tr>
<tr><th>Row8</th></tr>
</table>
</div>
<div id="dvData" style="position:absolute; left:100px; top:70px; height:300px; width:200px; overflow: auto" onscroll="sync()">
<table width="400px" border="1" title="Table Body">
<tr><td>Item1</td><td>Item2</td><td>Item3</td><td>Item4</td></tr>
<tr><td>Item1</td><td>Item2</td><td>Item3</td><td>Item4</td></tr>
<tr><td>Item1</td><td>Item2</td><td>Item3</td><td>Item4</td></tr>
<tr><td>Item1</td><td>Item2</td><td>Item3</td><td>Item4</td></tr>
<tr><td>Item1</td><td>Item2</td><td>Item3</td><td>Item4</td></tr>
<tr><td>Item1</td><td>Item2</td><td>Item3</td><td>Item4</td></tr>
<tr><td>Item1</td><td>Item2</td><td>Item3</td><td>Item4</td></tr>
<tr><td>Item1</td><td>Item2</td><td>Item3</td><td>Item4</td></tr>
</table>
</div>
</body>
</html>

camman

12:45 pm on Oct 12, 2005 (gmt 0)

10+ Year Member



Hi Again!

So I think I've solved it!
As I suspected I WAS missing something obvious. I just needed to surround my table row and column headers in their own div. This removes the need for z-index (although I'll remember that) and makes it cross browser compatible, although there's an issue with formatting in some browsers.

Anyway here's the working code if anyone needs it:

<html>
<HEAD>
<style type="text/css">
TD {width:100; height=50}
</style>
<script>

var xoffset=0;
var yoffset=0;
var tabwidth=200;
var tabheight=300;

function sync()
{

var datatableObj = document.getElementById("dvData");
var lft = datatableObj.scrollLeft;
var top = datatableObj.scrollTop;

var colheader = document.getElementById("dvHeader");
colheader.style.width= tabwidth+lft;
colheader.style.left= xoffset-lft;

var rowheader = document.getElementById("dvHeader2");
rowheader.style.height= tabheight+top;
rowheader.style.top = yoffset-top;

}

</script>
</HEAD>
<body>

<div id="dvButton" style="position:absolute; left:0px; top:20px; height:50px; width:100px; overflow: hidden; background-color:white">
<table border=1 width="100px" title="Table Button">
<tr><td>BUTTON</td></tr>
</table>
</div>

<div style="position:absolute; left:100px; top:20px; width:200px; height:50px; overflow: hidden">

<div id="dvHeader" style="position:absolute; left:0px; top:0px; height:50px; width:200px;">
<table width="400px" border="1" title="Table Heading">
<tr><td>Heading</td><td>Heading2</td><td>Heading3</td><td>Heading4</td></tr>
</table>
</div>

</div>

<div style="position:absolute; left:0px; top:70px; height:300px; width:100px; overflow: hidden">

<div id="dvHeader2" style="position:absolute; left:0px; top:0px; height:300px; width:100px;">
<table width="100px" border="1" title="Table Heading2">
<tr><td>Row1</td></tr>
<tr><td>Row2</td></tr>
<tr><td>Row3</td></tr>
<tr><td>Row4</td></tr>
<tr><td>Row5</td></tr>
<tr><td>Row6</td></tr>
<tr><td>Row7</td></tr>
<tr><td>Row8</td></tr>
</table>
</div>

</div>

<div id="dvData" style="position:absolute; left:100px; top:70px; height:300px; width:200px; overflow: auto" onscroll="sync()">
<table width="400px" border="1" title="Table Body">
<tr><td>Item1</td><td>Item2</td><td>Item3</td><td>Item4</td></tr>
<tr><td>Item1</td><td>Item2</td><td>Item3</td><td>Item4</td></tr>
<tr><td>Item1</td><td>Item2</td><td>Item3</td><td>Item4</td></tr>
<tr><td>Item1</td><td>Item2</td><td>Item3</td><td>Item4</td></tr>
<tr><td>Item1</td><td>Item2</td><td>Item3</td><td>Item4</td></tr>
<tr><td>Item1</td><td>Item2</td><td>Item3</td><td>Item4</td></tr>
<tr><td>Item1</td><td>Item2</td><td>Item3</td><td>Item4</td></tr>
<tr><td>Item1</td><td>Item2</td><td>Item3</td><td>Item4</td></tr>
</table>
</div>

</body>
</html>

doodlebee

8:28 pm on Oct 16, 2005 (gmt 0)

10+ Year Member



I'm not positive as to what you're trying to do - but I did notice you have a lot of "overflow:hidden".

Have you tried "overflow:scroll", or "overflow:auto"?

camman

9:45 am on Oct 17, 2005 (gmt 0)

10+ Year Member



Hi Doodlebee,

Thanks for your input.
If you view the code from my last post in a browser you'll get the idea. The reason for not using scroll or auto is because those overflows relate to the column and row headers and I don't want them to have visible scroll bars as they synchronously move when the data is scrolled. I guess it'll make more sense if you look at it in a browser.

Cheers though,

Camman

doodlebee

4:12 pm on Oct 17, 2005 (gmt 0)

10+ Year Member



Oh, I see...okay. Sorry! :)
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 10:37 am May 14, 2026