Solved

HTML table with 1st row and column freezed

Posted on 2004-04-08
11
1,493 Views
Last Modified: 2008-06-28
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?
0
Comment
Question by:claud_io
  • 3
  • 2
  • 2
  • +2
11 Comments
 
LVL 12

Assisted Solution

by:venkateshwarr
venkateshwarr earned 60 total points
ID: 10783060
Check out the example at Cd&
0
 
LVL 12

Assisted Solution

by:venkateshwarr
venkateshwarr earned 60 total points
ID: 10783071
0
 

Author Comment

by:claud_io
ID: 10783338
>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
 
LVL 12

Assisted Solution

by:venkateshwarr
venkateshwarr earned 60 total points
ID: 10783852
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
 
LVL 12

Assisted Solution

by:monosodiumg
monosodiumg earned 20 total points
ID: 10784493
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:claud_io
ID: 10790098
I found an example of what I need here:

http://www.activewidgets.com/

0
 
LVL 12

Expert Comment

by:monosodiumg
ID: 10791751
Cool!
0
 
LVL 12

Assisted Solution

by:lil_puffball
lil_puffball earned 420 total points
ID: 10794305
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
 
LVL 12

Accepted Solution

by:
lil_puffball earned 420 total points
ID: 10794658
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
 

Expert Comment

by:harishrajiv
ID: 12120211
thanks ,
really you have saved my precious time
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Angular - data is there but why isn't search working? 51 56
how can display objects ? 3 20
Add Context Menu Item 4 43
Need to click button twice to get results 2 32
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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…

930 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

13 Experts available now in Live!

Get 1:1 Help Now