Solved

HTML table with 1st row and column freezed

Posted on 2004-04-08
11
1,489 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
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

 

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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

706 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

20 Experts available now in Live!

Get 1:1 Help Now