HTML table with 1st row and column freezed

I need to have a table in a HTML page where first row and first columns are freezed to get the same effect it's possible to achieve in Excel using command "Freeze Panes" in cell B2.

It should be possible to scroll horizontally and vertically without reloading any page from the server.

Is it possible to do it?
Does anybody has a ready example?
claud_ioAsked:
Who is Participating?
 
lil_puffballConnect With a Mentor Commented:
This is better, the column/row doesn't flash:

<style>
td{border:#99ccff 1 solid;}
.tbl{border:#99ccff 1 solid;}
</style>

<script>
var topRow,leftCol,mainTbl,spacer,cont,w;
var border=1;
function init(){
  topRow=document.getElementById("topRow").cloneNode(true);
  leftCol=document.getElementById("leftCol").cloneNode(true);
  mainTbl=document.getElementById("mainTbl");
  spacer=document.getElementById("spacer");
  cont=document.getElementById("cont");
  var scrollbar=cont.offsetWidth-cont.clientWidth;

  var h=spacer.offsetHeight+border*2,w=spacer.offsetWidth;
  spacer=spacer.cloneNode(true);
  topRow.style.position="absolute";
  topRow.style.overflow="hidden";
  leftCol.style.position="absolute";
  leftCol.style.overflow="hidden";
  spacer.style.position="absolute";

  topRow.style.left=w+border*2+cont.offsetLeft;
  topRow.style.top=cont.offsetTop;
  topRow.style.width=cont.offsetWidth-scrollbar-w-border*2;
  topRow.firstChild.style.width=mainTbl.offsetWidth+border*2;
  topRow.firstChild.className="tbl";

  leftCol.style.left=cont.offsetLeft;
  leftCol.style.top=h+border*2+cont.offsetTop;
  leftCol.style.width=w;
  leftCol.style.height=cont.offsetHeight-scrollbar-h-border*2;
  leftCol.firstChild.className="tbl";

  spacer.style.width=w+border*2;
spacer.style.height=h+border*2;
  spacer.style.top=cont.offsetTop;
  spacer.style.left=cont.offsetLeft;
  spacer.firstChild.className="tbl";

  document.body.appendChild(topRow);
  document.body.appendChild(leftCol);
  document.body.appendChild(spacer);
  topRow.style.height=topRow.offsetHeight+border*2;
  leftCol.style.width=leftCol.offsetWidth+border*2;
}
function scrollTable(){
  leftCol.scrollTop=cont.scrollTop;
  topRow.scrollLeft=cont.scrollLeft;
}
</script>

<body onload="init();" onmouseup="scrollTable();">

<div id=cont style="height:200;width:300;overflow:auto;" onscroll="scrollTable();">

<table cellspacing=0 cellpadding=0>
<tr><td><div id=spacer><table cellspacing=0 cellpadding=0 bgcolor=white height=100% width=100%><tr><td>&nbsp;</td></tr></table></div></td><td>

<!--TOP ROW-->
<div id=topRow>
<table cellspacing=0 width=100% bgcolor=white>
<tr><td>Header</td><td>Header</td><td>Header</td><td>Header</td></tr>
</table></div>

</td></tr>
<tr><td>

<!--LEFT COLUMN-->
<div id=leftCol>
<table cellspacing=0 bgcolor=white>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
<tr><td>8</td></tr>
<tr><td>9</td></tr>
<tr><td>10</td></tr>
<tr><td>11</td></tr>
<tr><td>12</td></tr>
</table>
</div>

</td><td>

<!--MAIN TABLE-->
<div id=mainTbl>
<table width=300 cellspacing=0>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
</table></div>


</td></tr>
</table>

</div>
0
 
venkateshwarrConnect With a Mentor Commented:
Check out the example at Cd&
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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.

 
claud_ioAuthor Commented:
>Check out the example at Cd&

can you give the exact Url of the page I should take a look to?

>http://www.experts-exchange.com/Web/Web_Languages/Q_20932644.html

I took a look to it, I only find examples with 1st row fixed.
The problem of fixing both 1st row and 1st column is that they are not really fixed, when you scroll horizontally 1st colum is blocked and when you scroll bertically 1st row is blocked.
I wonder if it is really possible to get it ....
0
 
venkateshwarrConnect With a Mentor Commented:
I think you can insert one table in another and do this...
Try this code...

<html>
<head>
<script language="javascript">
window.onload = init;
function init() {
var eTable = document.getElementById("headers");
eTable.style.setExpression("width","document.getElementById('data').offsetWidth");
document.getElementById('th1').style.setExpression("width","document.getElementById('td1').offsetWidth");
document.getElementById('th2').style.setExpression("width","document.getElementById('td2').offsetWidth");
document.getElementById('th3').style.setExpression("width","document.getElementById('td3').offsetWidth");
document.getElementById('th4').style.setExpression("width","document.getElementById('td4').offsetWidth");
}
</script>
<style>
table#headers, table#data {table-layout:fixed;background:#dda0dd;}
td, th {vertical-align:top;background:#ffffff;}
</style>
</head>
<body>

<table border=0>
      <TD>
      <table>
            <tr> <TD> testdata1  </TD> </tr> </tr>
            <tr> <TD> testdata2  </TD> </tr> </tr>
            <tr> <TD> testdata3  </TD> </tr> </tr>
            <tr> <TD> testdata4  </TD> </tr> </tr>
            <tr> <TD> testdata5  </TD> </tr> </tr>
      </table>
      

      </TD>
      <TD>
            <table cellpadding="4" cellspacing="1" id="headers">
            <tr>
            <th id="th1">Test</th>
            <th id="th2">Hello</th>
            <th id="th3">Yoohoo</th>
            <th id="th4">Hmm</th>
            </tr>
            </table>
            <div style="width:100%;height:300px;overflow:auto;">
            <table cellpadding="4" cellspacing="1" width="100%" id="data">
            <tr>
            <td id="td1">Data</td>
            <td id="td2">Hello</td>
            <td id="td3">I am here and so are you</td>
            <td id="td4">Yoohoo</td>
            </tr>
            <tr>
            <td>Data</td>
            <td>Hello</td>
            <td>I am here and so are you</td>
            <td>Yoohoo</td>
            </tr>
            <tr>
            <td>Data</td>
            <td>Hello</td>
            <td>I...xxxxxxxxxxxxxxxxxxxxxx</td>
            <td>Yoohoo</td>
            </tr>
            <tr>
            <td>Data</td>
            <td>Hello</td>
            <td>I am here and so are you</td>
            <td>Yoohoo</td>
            </tr>
            <tr>
            <td>Data</td>
            <td>Hello</td>
            <td>I am here and so are you</td>
            <td>Yoohoo</td>
            </tr>
            <tr>
            <td>Data</td>
            <td>Hello</td>
            <td>I am here and so are you</td>
            <td>Yoohoo</td>
            </tr>
            <tr>
            <td>Data</td>
            <td>Hello</td>
            <td>I am here and so are you</td>
            <td>Yoohoo</td>
            </tr>
            <tr>
            <td>Data</td>
            <td>Hello</td>
            <td>I am here and so are you</td>
            <td>Yoohoo</td>
            </tr>
            <tr>
            <td>Data</td>
            <td>Hello</td>
            <td>I am here and so are you</td>
            <td>Yoohoo</td>
            </tr>
            <tr>
            <td>Data</td>
            <td>Hello</td>
            <td>I am here and so are you</td>
            <td>Yoohoo</td>
            </tr>
            <tr>
            <td>Data</td>
            <td>Hello</td>
            <td>I am here and so are you</td>
            <td>Yoohoo</td>
            </tr>
            <tr>
            <td>Data</td>
            <td>Hello</td>
            <td>I am here and so are you</td>
            <td>Yoohoo</td>
            </tr>
            <tr>
            <td>Data</td>
            <td>Hello</td>
            <td>I am here and so are you</td>
            <td>Yoohoo</td>
            </tr>
            </table>
      </TD>
</table>

</div>
</body>
</html>
0
 
monosodiumgConnect With a Mentor Commented:
You can't fix both the left column and the header row at the same time. Even Excel doesn't give you that.
A simple trick to fix the headers and allow you to scroll the body area vertically is to put the headers in a separate table and wrap the body table in div with a CSS2 overflow style:

      <table border="1">
      <tr><th>Heading1</th><th>Heading2</th></tr>
      </table>
      <div style="width: 220px; height: 100px; overflow: auto">
            <table width="200px" border="1" title="Table Body">
                 <tr><td>Item</td><td>Long Item........</td></tr>
              <tr><td>Item</td><td>Long Item........</td></tr>
              <tr><td>Item</td><td>Long Item........</td></tr>
              <tr><td>Item</td><td>Long Item........</td></tr>
              <tr><td>Item</td><td>Long Item........</td></tr>
              <tr><td>Item</td><td>Long Item........</td></tr>
              <tr><td>Item</td><td>Long Item........</td></tr>
              <tr><td>Item</td><td>Long Item........</td></tr>
              <tr><td>Item</td><td>Long Item........</td></tr>
              <tr><td>Item</td><td>Long Item........</td></tr>
            </table>
      </div>
0
 
claud_ioAuthor Commented:
I found an example of what I need here:

http://www.activewidgets.com/

0
 
monosodiumgCommented:
Cool!
0
 
lil_puffballConnect With a Mentor Commented:
How about this?

<style>
td{border:#99ccff 1 solid;}
</style>

<script>
var topRow,leftCol,mainTbl,spacer,cont,w;
var border=1;
function init(){
  topRow=document.getElementById("topRow").cloneNode(true);
  leftCol=document.getElementById("leftCol").cloneNode(true);
  mainTbl=document.getElementById("mainTbl");
  spacer=document.getElementById("spacer");
  var h=spacer.offsetHeight+border*2;
  w=spacer.offsetWidth;
  topRow.style.position="absolute";
  leftCol.style.position="absolute";
  topRow.style.left=w+border*2;
  topRow.style.width=mainTbl.offsetWidth;
  leftCol.style.left=border;
  leftCol.style.top=h+border*3;
  leftCol.style.width=w;
  spacer=spacer.cloneNode(true);
  spacer.style.position="absolute";
  spacer.style.zIndex=10;
  spacer.style.width=w;
spacer.style.height=h;
  spacer.style.top=border;spacer.style.left=border;
  cont=document.getElementById("cont");
  cont.appendChild(topRow);
  cont.appendChild(leftCol);
  cont.appendChild(spacer);
}
function scrollTable(){
  var l=0,t=0;
  if(cont.scrollLeft==0){l=1;}
  if(cont.scrollTop==0){t=1;}
  topRow.style.top=cont.scrollTop+t;
  topRow.style.left=w+border*2+1;
  spacer.style.top=cont.scrollTop+t;
  leftCol.style.left=cont.scrollLeft+l;
  spacer.style.left=cont.scrollLeft+l;
}
</script>

<body onload="init();" onmouseup="scrollTable();">

<div id=cont style="height:200;width:300;overflow:auto;" onscroll="scrollTable();">

<table cellspacing=0 cellpadding=0>
<tr><td><div id=spacer><table cellspacing=0 cellpadding=0 bgcolor=white height=100% width=100%><tr><td>&nbsp;</td></tr></table></div></td><td>

<!--TOP ROW-->
<div id=topRow>
<table cellspacing=0 width=100% bgcolor=white>
<tr><td>Header</td><td>Header</td><td>Header</td><td>Header</td></tr>
</table></div>

</td></tr>
<tr><td>

<!--LEFT COLUMN-->
<div id=leftCol>
<table cellspacing=0 bgcolor=white>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
<tr><td>8</td></tr>
<tr><td>9</td></tr>
<tr><td>10</td></tr>
<tr><td>11</td></tr>
<tr><td>12</td></tr>
</table>
</div>

</td><td>

<!--MAIN TABLE-->
<div id=mainTbl>
<table width=300 cellspacing=0>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
</table></div>


</td></tr>
</table>

</div>
0
 
harishrajivCommented:
thanks ,
really you have saved my precious time
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.