S7U.Blogspot.com

Dynamic Fixed Header Footer using Javascript

2010-10-09T17:48:00.019+05:30

Thanks to developer who created initial version of scrollable table using JavaScript and shared with everyone on http://www.webtoolkit.info/. It was not working in Chrome, Safari and Opera, so just modified the script to work in all browsers.

Also added dynamic height to it.

How to use this script?

As mentioned in webtoolkit.info you just need to enter table id.

<script type="text/javascript">
var t = new ScrollableTable(document.getElementById('myScrollTable'), 40);
</script>

Here you need to mention height in percentage. something like 40 for 40% of screen height

How table should be structured:

Table should have thead which will be present at the top of the table.
Table should have tbody which will be scrollable.
Table can have tfoot its optional.

var bodyHeight = this.tbody.clientHeight;
   var trs = this.tbody.getElementsByTagName('tr');
   if (bodyHeight >= (this.newHeight - (headHeight + footHeight))) {
     this.tbody.style.overflow = 'scroll';
   } 
   else {
  this.tbody.style.overflow = 'auto';
   }
   /*
    Chrome is built on Mozilla. Some script to assign width for tables dynamically.
   */
 var isChrome = (navigator.userAgent.toUpperCase().indexOf('MOZILLA')> -1 || navigator.userAgent.toUpperCase().indexOf('OPERA')> -1);

if(isChrome){ 
    this.thead.style.display ="inline-block"; 
    this.tfoot.style.display ="inline-block"; 
    this.tbody.style.display ="inline-block";
    this.tbody.style.overflow ="auto";

var count = trs[0].getElementsByTagName('th').length || trs[0].getElementsByTagName('td').length;
    var colArray = new Array(count);

/*Thead*/
    trs = this.tableEl.getElementsByTagName('tr');
    for(var i=0; i < trs.length ; i++ ){
     var cols = trs[i].getElementsByTagName('th') || trs[i].getElementsByTagName('td');
     for(var j=0; j < cols.length ; j++){
      if(colArray[j]==null || colArray[j] < cols[j].clientWidth){
       colArray[j] =cols[j].clientWidth;
      }
     }   
    }

var sumArray=0;
    for(i =0; i < colArray.length; i++){
     sumArray += colArray[i]; 
    }

/* if the width of any cell is greater */
    if (sumArray < (this.newWidth - this.scrollWidth)){
     var newCount =0;
     var nWidth =0;
     for(i =0; i < colArray.length; i++){
      var wid = (this.newWidth - this.scrollWidth)/count;
      if(wid < colArray[i]){
       newCount++;
       nWidth += colArray[i];
      }
     }
     var newWid = ((this.newWidth - this.scrollWidth) - nWidth)/(count-newCount);
     for(i =0; i < colArray.length; i++){
      var wid = (this.newWidth - this.scrollWidth)/count;
      if(wid >= colArray[i]){
       colArray[i]= newWid;
      }
     }
    }
   
    /*Thead */
    trs = this.thead.getElementsByTagName('tr');
    for(var i=0; i < trs.length ; i++ ){
     var cols = trs[i].getElementsByTagName('th')||trs[i].getElementsByTagName('td');
     for(var j=0; j < cols.length ; j++){
      cols[j].style.width = colArray[j] + 'px';
     }   
     var tcell1 = trs[i].insertCell(cols.length); 
     tcell1.setAttribute("width", this.scrollWidth -2 +'px' );     
    }
    /*Tbody */
    trs = this.tbody.getElementsByTagName('tr');
    for(var i=0; i < trs.length ; i++ ){
     var cols = trs[i].getElementsByTagName('td');
     for(var j=0; j < cols.length ; j++){
      cols[j].style.width = colArray[j] + 'px';
     }
    }
    /*Tfoot */
    trs = this.tfoot.getElementsByTagName('tr');
    for(var i=0; i < trs.length ; i++ ){
     var cols = trs[i].getElementsByTagName('th')||trs[i].getElementsByTagName('td');
     for(var j=0; j < cols.length ; j++){
      cols[j].style.width = colArray[j] + 'px';
     }
     var tcell1 = trs[i].insertCell(cols.length); 
     tcell1.setAttribute("width", this.scrollWidth -2 +'px');       
    }

}
   else{ // else block is for Firefox
    trs = this.tbody.getElementsByTagName('tr');
    for (x=0; x < trs.length; x++) {
     var tds = trs[x].getElementsByTagName('td');
     tds[tds.length-1].style.paddingRight += this.scrollWidth + 'px';
    }  
   
   }

</tr>
 </thead>
 
 <tbody>
  <tr class="r1">
   <td>Shahib</td>
   <td>Ulla</td>
   <td>25</td>
   <td> Bangalore</td>
   <td>India</td>
   <td>78</tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>32</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>33</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>34</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>35</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>34</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>35</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>34</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>35</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>34</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>35</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>34</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>35</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>34</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>35</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>34</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>35</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>34</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>35</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>34</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>35</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>36</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>37</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>30</th>
   <td>John</th>
   <td>Smith</th>
   <td>30</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>32</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>33</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>34</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>35</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>34</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>35</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>34</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>35</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>34</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>35</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>34</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>35</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>34</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>35</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>34</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>35</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>34</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>35</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>34</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>35</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>36</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>37</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
 </tbody> 
 <tfoot>
  <tr>
   <th>Name</th>
   <th>Surename</th>
   <th>Age</th>
   <th>Name</th>
   <th>Surename</th>
   <th>Age</th>
  </tr>
 </tfoot>
</table>
 
<script type="text/javascript">
var t = new ScrollableTable(document.getElementById('myScrollTable'), 40);
</script>

Name	Surename	Age	City	Country	Pin
Shahib	Ulla	25	Bangalore	India	78
John	Smith	31	John	Smith	31
John	Smith	32	John	Smith	31
John	Smith	33	John	Smith	31
John	Smith	34	John	Smith	31
John	Smith	35	John	Smith	31
John	Smith	34	John	Smith	31
John	Smith	35	John	Smith	31
John	Smith	34	John	Smith	31
John	Smith	35	John	Smith	31
John	Smith	34	John	Smith	31
John	Smith	35	John	Smith	31
John	Smith	34	John	Smith	31
John	Smith	35	John	Smith	31
John	Smith	34	John	Smith	31
John	Smith	35	John	Smith	31
John	Smith	34	John	Smith	31
John	Smith	35	John	Smith	31
John	Smith	34	John	Smith	31
John	Smith	35	John	Smith	31
John	Smith	34	John	Smith	31
John	Smith	35	John	Smith	31
John	Smith	36	John	Smith	31
John	Smith	37	John	Smith	31
John	Smith	30	John	Smith	30
John	Smith	31	John	Smith	31
John	Smith	32	John	Smith	31
John	Smith	33	John	Smith	31
John	Smith	34	John	Smith	31
John	Smith	35	John	Smith	31
John	Smith	34	John	Smith	31
John	Smith	35	John	Smith	31
John	Smith	34	John	Smith	31
John	Smith	35	John	Smith	31
John	Smith	34	John	Smith	31
John	Smith	35	John	Smith	31
John	Smith	34	John	Smith	31
John	Smith	35	John	Smith	31
John	Smith	34	John	Smith	31
John	Smith	35	John	Smith	31
John	Smith	34	John	Smith	31
John	Smith	35	John	Smith	31
John	Smith	34	John	Smith	31
John	Smith	35	John	Smith	31
John	Smith	34	John	Smith	31
John	Smith	35	John	Smith	31
John	Smith	36	John	Smith	31
John	Smith	37	John	Smith	31
Name	Surename	Age	Name	Surename	Age

Dynamic Height Fixed Header Table

2010-10-03T22:10:00.043+05:30

What is meant by Dynamic?

Dynamic is something which changes depending on Environment. Here height and width will change according to System. i.e., it will change its height and width depending on System height and width.

Hundreds of monitors available with different dimensions. Few will have 1024 * 800 and few others 1200*1024. Things which works perfectly in 1024* 800 will not work perfectly in 1200*1024.

So everyone wants some thing dynamic which should change depending on monitor width and height. Here is something which does that function for you.

In the below script you just need to width, If you specify 100 it means 100% if you specify 50 it means 50%.

It does not use CSS Hacks
divHeight will represent the Div Height.
divWidth will represent the Div Width.
Cell width is calculated by dividing Div Width with number of columns

var divHeight= 50;

var divWidth= 50;

</script>

<STYLE>
DIV.ScrollTableDS{
 clear: both;
 overflow: AUTO;
 POSITION: relative;
 color:black;
}
DIV.ScrollTableDS thead td, tfoot td {
 background-color: #1B82E6;
 Z-INDEX: 60;
 position:relative;
}
DIV.ScrollTableDS table{
 border:0px;
 cellspacing:1px;
 cellpading:1px;
 TEXT-ALIGN: center;
}

DIV.ScrollTableDS thead td{
 TOP: expression(this.offsetParent.scrollTop -2);
}
DIV.ScrollTableDS tfoot td{
 TOP: expression(this.offsetParent.clientHeight + this.offsetParent.scrollTop - (this.offsetParent.scrollHeight -2));
}

tr.odd{
 background-color:#FFFFFF;
}
tr.even{
 background-color:#D2E9FF;
}

th.fixedLeft, td.fixedLeft {
 z-index: 60;
 border-right: 1px solid silver;
 border-left: 1px solid silver;
 LEFT: expression(this.offsetParent.scrollLeft -1);
 POSITION: relative;
}
th.fixedRight, td.fixedRight {
 z-index: 60;
 border-right: 1px solid silver;
 border-left: 1px solid silver;
 LEFT: expression(this.offsetParent.clientWidth - this.offsetParent.scrollWidth + this.offsetParent.scrollLeft +1); 
 POSITION: relative;
}
</STYLE>
<DIV class="ScrollTableDS" id="ScrollTableDS">
 <TABLE id="TableDS">
  <THEAD id="scrollHeaderDS">
   <TR>
    <TD class="fixedLeft" style="z-Index:70">First Column</TD>
    <TD>Second Column</TD>
    <TD>Third Column</TD>
    <TD>Fourth Column</TD>
    <TD>Fifth Column</TD>
    <TD>Sixth Column</TD>
    <TD>Seventh Column</TD>
    <TD class="fixedRight" style="z-Index:70">Ninth Column</TD>
   </TR>
  </THEAD>
  <TBODY id="scrollBodyDS">
   <TR class="odd">
    <TD class="fixedLeft">0</TD>
    <TD>0</TD>
    <TD>0</TD>
    <TD>0</TD>
    <TD>0</TD>
    <TD>0</TD>
    <TD>0</TD>
    <TD class="fixedRight">0</TD>
   </TR>
   <TR class="even">
    <TD class="fixedLeft">1</TD>
    <TD>1</TD>
    <TD>1</TD>
    <TD>1</TD>
    <TD>1</TD>
    <TD>1</TD>
    <TD>1</TD>
    <TD class="fixedRight">1</TD>
   </TR>
   <TR class="odd">
    <TD class="fixedLeft">2</TD>
    <TD>2</TD>
    <TD>2</TD>
    <TD>2</TD>
    <TD>2</TD>
    <TD>2</TD>
    <TD>2</TD>
    <TD class="fixedRight">2</TD>
   </TR>
   <TR class="even">
    <TD class="fixedLeft">3</TD>
    <TD>3</TD>
    <TD>3</TD>
    <TD>3</TD>
    <TD>3</TD>
    <TD>3</TD>
    <TD>3</TD>
    <TD class="fixedRight">3</TD>
   </TR>
   <TR class="odd">
    <TD class="fixedLeft">4</TD>
    <TD>4</TD>
    <TD>4</TD>
    <TD>4</TD>
    <TD>4</TD>
    <TD>4</TD>
    <TD>4</TD>
    <TD class="fixedRight">4</TD>
   </TR>
   <TR class="even">
    <TD class="fixedLeft">5</TD>
    <TD>5</TD>
    <TD>5</TD>
    <TD>5</TD>
    <TD>5</TD>
    <TD>5</TD>
    <TD>5</TD>
    <TD class="fixedRight">5</TD>
   </TR>
   <TR class="odd">
    <TD class="fixedLeft">6</TD>
    <TD>6</TD>
    <TD>6</TD>
    <TD>6</TD>
    <TD>6</TD>
    <TD>6</TD>
    <TD>6</TD>
    <TD class="fixedRight">6</TD>
   </TR>
   <TR class="even">
    <TD class="fixedLeft">7</TD>
    <TD>7</TD>
    <TD>7</TD>
    <TD>7</TD>
    <TD>7</TD>
    <TD>7</TD>
    <TD>7</TD>
    <TD class="fixedRight">7</TD>
   </TR>
   <TR class="odd">
    <TD class="fixedLeft">8</TD>
    <TD>8</TD>
    <TD>8</TD>
    <TD>8</TD>
    <TD>8</TD>
    <TD>8</TD>
    <TD>8</TD>
    <TD class="fixedRight">8</TD>
   </TR>
   <TR class="even">
    <TD class="fixedLeft">9</TD>
    <TD>9</TD>
    <TD>9</TD>
    <TD>9</TD>
    <TD>9</TD>
    <TD>9</TD>
    <TD>9</TD>
    <TD class="fixedRight">9</TD>
   </TR>
   <TR class="odd">
    <TD class="fixedLeft">10</TD>
    <TD>0</TD>
    <TD>0</TD>
    <TD>0</TD>
    <TD>0</TD>
    <TD>0</TD>
    <TD>0</TD>
    <TD class="fixedRight">10</TD>
   </TR>
   <TR class="even">
    <TD class="fixedLeft">11</TD>
    <TD>1</TD>
    <TD>1</TD>
    <TD>1</TD>
    <TD>1</TD>
    <TD>1</TD>
    <TD>1</TD>
    <TD class="fixedRight">11</TD>
   </TR>
   <TR class="odd">
    <TD class="fixedLeft">12</TD>
    <TD>2</TD>
    <TD>2</TD>
    <TD>2</TD>
    <TD>2</TD>
    <TD>2</TD>
    <TD>2</TD>
    <TD class="fixedRight">12</TD>
   </TR>
   <TR class="even">
    <TD class="fixedLeft">13</TD>
    <TD>3</TD>
    <TD>3</TD>
    <TD>3</TD>
    <TD>3</TD>
    <TD>3</TD>
    <TD>3</TD>
    <TD class="fixedRight">13</TD>
   </TR>               
   <TR class="odd">
    <TD class="fixedLeft">14</TD>
    <TD>4</TD>
    <TD>4</TD>
    <TD>4</TD>
    <TD>4</TD>
    <TD>4</TD>
    <TD>4</TD>
    <TD class="fixedRight">14</TD>
   </TR>
   <TR class="even">
    <TD class="fixedLeft">15</TD>
    <TD>5</TD>
    <TD>5</TD>
    <TD>5</TD>
    <TD>5</TD>
    <TD>5</TD>
    <TD>5</TD>
    <TD class="fixedRight">15</TD>
   </TR>
  </TBODY>
  <TFOOT id="scrollFooterDS">
   <TR>
    <TD class="fixedLeft" style="z-Index:70">First Column</TD>
    <TD>Second Column</TD>
    <TD>Third Column</TD>
    <TD>Fourth Column</TD>
    <TD>Fifth Column</TD>
    <TD>Sixth Column</TD>
    <TD>Seventh Column</TD>
    <TD class="fixedRight" style="z-Index:70">Ninth Column</TD>
   </TR>
  </TFOOT>
 </TABLE>
</DIV>

var isChrome = navigator.userAgent.toUpperCase().indexOf('CHROME')> -1; 
var isIE = navigator.userAgent.toUpperCase().indexOf('MSIE')> -1;

divWidth= (divWidth * 0.01 * screen.width - 20);
divHeight= (divHeight * 0.01 * screen.height);
document.getElementById('ScrollTableDS').style.height = divHeight; 
document.getElementById('ScrollTableDS').style.width = divWidth; 
var rows = document.getElementById('TableDS').getElementsByTagName('tr');   
for(var i =0; i< rows.length; i++){
 var cols = rows[i].getElementsByTagName('td');
 var divWd = divWidth/cols.length;
 for(j=0; j< cols.length; j++){
   cols[j].setAttribute("width", divWd); 
 }
}

if(isChrome){ 
 document.getElementById('scrollBodyDS').style.display ="block";
 document.getElementById('TableDS').tHead.style.display ="block"; 
 document.getElementById('TableDS').tFoot.style.display ="block"; 
 document.getElementById('ScrollTableDS').style.width = divWidth; 
}

if(!isIE){ 
 //extra column for header
 rows =  document.getElementById('TableDS').tHead.getElementsByTagName('tr'); 
 for(var i=0; i < rows.length; i++){
  var cols = rows[i].getElementsByTagName('td'); 
  var tcell1 = rows[i].insertCell(cols.length); 
  tcell1.setAttribute("width", "17px"); 
 }
 //extra column for footer
 rows =  document.getElementById('TableDS').tFoot.getElementsByTagName('tr'); 
 for(var i=0; i < rows.length; i++){
  var cols = rows[i].getElementsByTagName('td'); 
  var tcell1 = rows[i].insertCell(cols.length); 
  tcell1.setAttribute("width", "17px"); 
 }
 var bRows=0;
 bRows = bRows  + document.getElementById('TableDS').tFoot.offsetHeight + document.getElementById('TableDS').tHead.offsetHeight +5;
 bRows = divHeight - bRows;
  
 document.getElementById('scrollBodyDS').style.height = bRows;
 document.getElementById('scrollBodyDS').style.overflow ="AUTO"; 
 document.getElementById('ScrollTableDS').style.overflow ="hidden"; 
} 
</script>

Advantages from previous version:

Works fine in Chrome. Google Chrome uses CSS2 new version when compared to other browser. So few things does not work fine in Chrome.
Width and Height is configurable. If you want table to cover 50% of screen just specify 50 to DivHeight and DivWidth variables.
If you add below code to first version it works fine in Chrome and FF.

var divHeight= 40;

var divWidth= 60;

var isChrome = navigator.userAgent.toUpperCase().indexOf('CHROME')> -1;

var isIE = navigator.userAgent.toUpperCase().indexOf('MSIE')> -1;

divWidth= (divWidth * 0.01 * screen.width - 20);

divHeight= (divHeight * 0.01 * screen.height);

document.getElementById('ScrollTableDS').style.height = divHeight;

document.getElementById('ScrollTableDS').style.width = divWidth;

var rows = document.getElementById('TableDS').getElementsByTagName('tr');

for(var i =0; i< rows.length; i++){

var cols = rows[i].getElementsByTagName('td');

var divWd = divWidth/cols.length;

for(j=0; j< cols.length; j++){

cols[j].setAttribute("width", divWd);

}

if(isChrome){

document.getElementById('scrollBodyDS').style.display ="block";

document.getElementById('TableDS').tHead.style.display ="block";

document.getElementById('TableDS').tFoot.style.display ="block";

document.getElementById('ScrollTableDS').style.width = divWidth;

}

if(!isIE){

//extra column for header

rows = document.getElementById('TableDS').tHead.getElementsByTagName('tr');

for(var i=0; i < rows.length; i++){

var cols = rows[i].getElementsByTagName('td');

var tcell1 = rows[i].insertCell(cols.length);

tcell1.setAttribute("width", "17px");

}

//extra column for footer

rows = document.getElementById('TableDS').tFoot.getElementsByTagName('tr');

for(var i=0; i < rows.length; i++){

var cols = rows[i].getElementsByTagName('td');

var tcell1 = rows[i].insertCell(cols.length);

tcell1.setAttribute("width", "17px");

}

var bRows=0;

bRows = bRows + document.getElementById('TableDS').tFoot.offsetHeight + document.getElementById('TableDS').tHead.offsetHeight +5;

bRows = divHeight - bRows;

document.getElementById('scrollBodyDS').style.height = bRows;

document.getElementById('scrollBodyDS').style.overflow ="AUTO";

document.getElementById('ScrollTableDS').style.overflow ="hidden";

}

</script>

First Column	Second Column	Third Column	Fourth Column	Fifth Column	Sixth Column	Seventh Column	Ninth Column
0	0	0	0	0	0	0	0
1	1	1	1	1	1	1	1
2	2	2	2	2	2	2	2
3	3	3	3	3	3	3	3
4	4	4	4	4	4	4	4
5	5	5	5	5	5	5	5
6	6	6	6	6	6	6	6
7	7	7	7	7	7	7	7
8	8	8	8	8	8	8	8
9	9	9	9	9	9	9	9
10	0	0	0	0	0	0	10
11	1	1	1	1	1	1	11
12	2	2	2	2	2	2	12
13	3	3	3	3	3	3	13
14	4	4	4	4	4	4	14
15	5	5	5	5	5	5	15
First Column	Second Column	Third Column	Fourth Column	Fifth Column	Sixth Column	Seventh Column	Ninth Column

Fixed Header Footer without CSS hacks

2010-09-29T01:03:00.057+05:30

Few CSS tags which I have used in my below posts are called as CSS hacks. Still I feel they are very save, because they are just changing styles with the browser.

Anyways, here is the new version. I think it is quite difficult to edit this version when compared to older one. If you need any kind of help, just let me know. I would be glad to help you.

Changes what I did from my previous version.

Removed CSS tags for cross browser scripting.
Added JavaScript code instead of CSS hacks.

You can get information about CSS Hacks here!!

<STYLE>
DIV.scrollTableNoHack{
 clear: both;
 overflow: AUTO;
 width: 580px;
 height: 300px;
 POSITION: relative;
 color:black;
}
DIV.scrollTableNoHack thead td, tfoot td {
 background-color: #1B82E6;
 Z-INDEX: 60;
 position:relative;
}
DIV.scrollTableNoHack table{
 border:0px;
 cellspacing:1px;
 cellpading:1px;
 TEXT-ALIGN: center;
}

DIV.scrollTableNoHack thead td{
 TOP: expression(this.offsetParent.scrollTop -2);
}
DIV.scrollTableNoHack tfoot td{
 TOP: expression(this.offsetParent.clientHeight + this.offsetParent.scrollTop - (this.offsetParent.scrollHeight -2));
}

tr.odd{
 background-color:#FFFFFF;
}
tr.even{
 background-color:#D2E9FF;
}

th.fixedLeftNoHack, td.fixedLeftNoHack {
 z-index: 60;
 border-right: 1px solid silver;
 border-left: 1px solid silver;
 LEFT: expression(this.offsetParent.scrollLeft -1);
 POSITION: relative;
}
th.fixedRightNoHack, td.fixedRightNoHack {
 z-index: 60;
 border-right: 1px solid silver;
 border-left: 1px solid silver;
 LEFT: expression(this.offsetParent.clientWidth - this.offsetParent.scrollWidth + this.offsetParent.scrollLeft +1); 
 POSITION: relative;
}
</STYLE>  
<div class="scrollTableNoHack" id = "scrollTableNoHack"> 
    <table id="TableNoHack"  width="100%">  
    <thead class="scrollHeadNoHack" id="scrollHeadNoHack"> 
  <tr id="tr1">               
           <td class="fixedLeftNoHack" style="z-index:80;">first-column</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td class="fixedRightNoHack" style="z-index:80;">Last-column</td> 
        </tr>    
    </thead> 
        <tbody class="scrollBodyNoHack" id="scrollBodyNoHack"> 
        <tr style="background-color:#D2E9FF">               
           <td class="fixedLeftNoHack">first-column</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
   <td>second</td>               
           <td>second</td>               
           <td class="fixedRightNoHack">Last-column</td> 
        </tr> 
        <tr style="background-color:#FFFFFF">               
           <td class="fixedLeftNoHack">first-column</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td class="fixedRightNoHack">Last-column</td> 
        </tr> 
        <tr style="background-color:#D2E9FF">               
           <td class="fixedLeftNoHack">first-column</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
   <td>second</td>               
           <td>second</td>               
           <td class="fixedRightNoHack">Last-column</td> 
        </tr> 
        <tr style="background-color:#FFFFFF">               
           <td class="fixedLeftNoHack">first-column</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td class="fixedRightNoHack">Last-column</td> 
        </tr> 
        <tr style="background-color:#D2E9FF">               
           <td class="fixedLeftNoHack">first-column</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
   <td>second</td>               
           <td>second</td>               
           <td class="fixedRightNoHack">Last-column</td> 
        </tr> 
        <tr style="background-color:#FFFFFF">               
           <td class="fixedLeftNoHack">first-column</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td class="fixedRightNoHack">Last-column</td> 
        </tr> 
        <tr style="background-color:#D2E9FF">               
           <td class="fixedLeftNoHack">first-column</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
   <td>second</td>               
           <td>second</td>               
           <td class="fixedRightNoHack">Last-column</td> 
        </tr> 
        <tr style="background-color:#FFFFFF">               
           <td class="fixedLeftNoHack">first-column</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td class="fixedRightNoHack">Last-column</td> 
        </tr> 
        <tr style="background-color:#D2E9FF">               
           <td class="fixedLeftNoHack">first-column</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
   <td>second</td>               
           <td>second</td>               
           <td class="fixedRightNoHack">Last-column</td> 
        </tr> 
        <tr style="background-color:#FFFFFF">               
           <td class="fixedLeftNoHack">first-column</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td class="fixedRightNoHack">Last-column</td> 
        </tr> 
        <tr style="background-color:#D2E9FF">               
           <td class="fixedLeftNoHack">first-column</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
   <td>second</td>               
           <td>second</td>               
           <td class="fixedRightNoHack">Last-column</td> 
        </tr> 
        <tr style="background-color:#FFFFFF">               
           <td class="fixedLeftNoHack">first-column</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td class="fixedRightNoHack">Last-column</td> 
        </tr> 
        <tr style="background-color:#D2E9FF">               
           <td class="fixedLeftNoHack">first-column</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
   <td>second</td>               
           <td>second</td>               
           <td class="fixedRightNoHack">Last-column</td> 
        </tr> 
        <tr style="background-color:#FFFFFF">               
           <td class="fixedLeftNoHack">first-column</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td class="fixedRightNoHack">Last-column</td> 
        </tr> 
        <tr style="background-color:#D2E9FF">               
           <td class="fixedLeftNoHack">first-column</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
     <td>second</td>               
           <td>second</td>               
           <td class="fixedRightNoHack">Last-column</td> 
        </tr> 
        <tr style="background-color:#FFFFFF">               
           <td class="fixedLeftNoHack">first-column</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td class="fixedRightNoHack">Last-column</td> 
        </tr> 
        <tr style="background-color:#D2E9FF">               
           <td class="fixedLeftNoHack">first-column</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
     <td>second</td>               
           <td>second</td>               
           <td class="fixedRightNoHack">Last-column</td> 
        </tr> 
        <tr style="background-color:#FFFFFF">               
           <td class="fixedLeftNoHack">first-column</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td class="fixedRightNoHack">Last-column</td> 
        </tr> 
  </tbody> 
        <tfoot class="scrollFooterHack" id="scrollFooterHack"> 
        <tr>               
           <td class="fixedLeftNoHack">first-column</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td>second</td>               
           <td class="fixedRightNoHack">Last-column</td> 
        </tr>         
 </tfoot> 
</table> 
</div> 
<script> 
var isChrome = navigator.userAgent.toUpperCase().indexOf('CHROME')> -1; 
var isIE = navigator.userAgent.toUpperCase().indexOf('MSIE')> -1;

if(isChrome){ 
 document.getElementById('scrollHeadNoHack').style.display ="block"; 
 document.getElementById('scrollBodyNoHack').style.display ="block"; 
 document.getElementById('scrollFooterHack').style.display ="block"; 
 document.getElementById('scrollTableNoHack').style.width ="540px"; 
} 
if(!isIE){ 
 document.getElementById('scrollBodyNoHack').style.height ="200px"; 
 document.getElementById('scrollBodyNoHack').style.overflow ="auto"; 
 document.getElementById('scrollTableNoHack').style.overflow ="hidden"; 
  
 var rows = document.getElementById('TableNoHack').getElementsByTagName('tr');   
 var cols = rows[0].getElementsByTagName('td'); 
 var tcell1 = rows[0].insertCell(cols.length); 
 tcell1.setAttribute("width", "12px");
 tcell1.setAttribute("style", "visibility:hidden");
 var tcell2 = rows[rows.length -1].insertCell(cols.length); 
 tcell2.setAttribute("width", "12px");
 } 
</script>

This is similar to my first post Scrollable Table only thing is it has JavaScript which detects the browser and do changes. Here good thing is I have avoided CSS hacks. (Few words create disturbance in our mind. If we avoid those words we will be very happy. Hack is one kind of word which do the same :-) )

The below script does the magic part. First I am identifying if the browser. I am checking if the browser is Chrome and if it is IE.

<script>

var isChrome = navigator.userAgent.toUpperCase().indexOf('CHROME')> -1;
var isIE = navigator.userAgent.toUpperCase().indexOf('MSIE')> -1;

if(isChrome){
document.getElementById('scrollHead').style.display ="block";
document.getElementById('scrollBody').style.display ="block";
document.getElementById('scrollFooter').style.display ="block";
document.getElementById('tableHolder2').style.width ="580px";
}
if(!isIE){
document.getElementById('scrollBody').style.height ="200px";
document.getElementById('scrollBody').style.overflow ="auto";
document.getElementById('tableHolder2').style.overflow ="hidden";

var rows = document.getElementById('Table0').getElementsByTagName('tr');
var cols = rows[0].getElementsByTagName('td');
var tcell1 = rows[0].insertCell(cols.length);
tcell1.setAttribute("width", "12px");
tcell1.setAttribute("style", "visibility:hidden");
var tcell2= rows[rows.length-1].insertCell(cols.length);
tcell2.setAttribute("width", "12px");

}
</script>

First script is meant for Chrome browser. I am setting display attribute as block for THEAD, TBODY & TFOOT. I still need to dig other ways. But this is the thing which is working fine now

Second script is meant for Browsers other than IE. Here I am setting overflow property of TBODY to auto, Assigning height to TBODY. Then the last step was to add a extra cell to the THEAD and TFOOT.

After making all the changes the code works fine.

first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column

Fixed Header Footer Table

2010-08-21T22:05:00.079+05:30

I am working on Fixed Header Footer table functionality almost from past 2 years. First version you can find in the same blog. That was my first post.

Now after two years, I am able to find something which works fine in Firefox as well as Chrome. Most difficult part was making the table scrollable in Chrome, FF and IE. (Only one dimensional scroll works in Firefox and Chrome, that means only fixed header and fixed footer not fix columns)

Now how to make Scrollable table in Chrome.

Copy this code and modify it to suite your requirements.
What ever highlighted in bold are important ones. Specify height and width for DIV.
Height for tbody should be less than Div width(Div width -100px)

<STYLE>
DIV.scrollTableALL{
 clear: both;
 overflow: AUTO;
 width: 580px;
 height: 300px;
 POSITION: relative;
 color:black;
}
DIV.scrollTableALL thead td, tfoot td {
 background-color: #1B82E6;
 Z-INDEX: 60;
 position:relative;
}
DIV.scrollTableALL table{
 border:0px;
 cellspacing:1px;
 cellpading:1px;
 TEXT-ALIGN: center;
}

DIV.scrollTableALL thead td{
 TOP: expression(this.offsetParent.scrollTop -2);
}
DIV.scrollTableALL tfoot td{
 TOP: expression(this.offsetParent.clientHeight + this.offsetParent.scrollTop - (this.offsetParent.scrollHeight -2));
}

tr.odd{
 background-color:#FFFFFF;
}
tr.even{
 background-color:#D2E9FF;
}

th.fixedLeftALL, td.fixedLeftALL {
 z-index: 60;
 border-right: 1px solid silver;
 border-left: 1px solid silver;
 LEFT: expression(this.offsetParent.scrollLeft -1);
 POSITION: relative;
}
th.fixedRightALL, td.fixedRightALL {
 z-index: 60;
 border-right: 1px solid silver;
 border-left: 1px solid silver;
 LEFT: expression(this.offsetParent.clientWidth - this.offsetParent.scrollWidth + this.offsetParent.scrollLeft +1); 
 POSITION: relative;
}

html>body div.scrollTableALL {
overflow: hidden;
}
html>body tbody.scrollBodyALL {
height: 200px;
overflow: auto;
}
</style>

<div class="scrollTableALL" id = "scrollTableALL">
<table id="TableALL" width="100%"> 
<thead class="scrollHeadALL" id="scrollHeadALL">
<tr>
<td class="fixedLeftALL" style="z-index:80;">first-column</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td class="fixedRightALL" style="z-index:80;">Last-column</td>

<td width="14px"> </td>

</tr>
</thead>
<tbody class="scrollBodyALL" id="scrollBodyALL">
<tr style="background-color:#D2E9FF">
<td class="fixedLeftALL">first-column</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td class="fixedRightALL">Last-column</td>
</tr>
<tr style="background-color:#FFFFFF">
<td class="fixedLeftALL">first-column</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td class="fixedRightALL">Last-column</td>
</tr>
<tr style="background-color:#D2E9FF">
<td class="fixedLeftALL">first-column</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td class="fixedRightALL">Last-column</td>
</tr>
<tr style="background-color:#FFFFFF">
<td class="fixedLeftALL">first-column</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td class="fixedRightALL">Last-column</td>
</tr>
<tr style="background-color:#D2E9FF">
<td class="fixedLeftALL">first-column</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td class="fixedRightALL">Last-column</td>
</tr>
<tr style="background-color:#FFFFFF">
<td class="fixedLeftALL">first-column</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td class="fixedRightALL">Last-column</td>
</tr>
<tr style="background-color:#D2E9FF">
<td class="fixedLeftALL">first-column</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td class="fixedRightALL">Last-column</td>
</tr>
<tr style="background-color:#FFFFFF">
<td class="fixedLeftALL">first-column</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td class="fixedRightALL">Last-column</td>
</tr>
<tr style="background-color:#D2E9FF">
<td class="fixedLeftALL">first-column</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td class="fixedRightALL">Last-column</td>
</tr>
<tr style="background-color:#FFFFFF">
<td class="fixedLeftALL">first-column</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td class="fixedRightALL">Last-column</td>
</tr>
<tr style="background-color:#D2E9FF">
<td class="fixedLeftALL">first-column</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td class="fixedRightALL">Last-column</td>
</tr>
<tr style="background-color:#FFFFFF">
<td class="fixedLeftALL">first-column</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td class="fixedRightALL">Last-column</td>
</tr>
<tr style="background-color:#D2E9FF">
<td class="fixedLeftALL">first-column</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td class="fixedRightALL">Last-column</td>
</tr>
<tr style="background-color:#FFFFFF">
<td class="fixedLeftALL">first-column</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td class="fixedRightALL">Last-column</td>
</tr>
<tr style="background-color:#D2E9FF">
<td class="fixedLeftALL">first-column</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td class="fixedRightALL">Last-column</td>
</tr>
<tr style="background-color:#FFFFFF">
<td class="fixedLeftALL">first-column</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td class="fixedRightALL">Last-column</td>
</tr>
<tr style="background-color:#D2E9FF">
<td class="fixedLeftALL">first-column</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td class="fixedRightALL">Last-column</td>
</tr>
<tr style="background-color:#FFFFFF">
<td class="fixedLeftALL">first-column</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td class="fixedRightALL">Last-column</td>
</tr>
</tbody>
<tfoot class="scrollFooterALL" id="scrollFooterALL"><tr>
<tr>
<td class="fixedLeftALL">first-column</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td>second</td>
<td class="fixedRightALL">Last-column</td>

<td width="14px"> </td>

</tr>
</tr></tfoot>

</table>
</div>
<script>
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome')> -1;
if(is_chrome){
document.getElementById('scrollHeadALL').style.display ="block";
document.getElementById('scrollBodyALL').style.display ="block";
document.getElementById('scrollFooterALL').style.display ="block";
document.getElementById('scrollTableALL').style.width ="540px";
}
</script>

I guess you want to know what is difference between present code which works fine in Chrome and Firefox and past code which only works fine in IE.

Here I have used HTML tags which changes the style sheet according to browser. The below code works only when browser is other than IE.
These CSS are regarded as CSS hacks, but they are still safe to to use. You can check this website http://www.webdevout.net/css-hacks for more information.

html>body div.tableHolder {
overflow: hidden;
}
html>body tbody.scrollBody {
height: 200px;
overflow: auto;
}

The code for IE is same. But for Firefox and Chrome what I am doing is; I am making TBODY scrollable by setting Overflow:auto

But if we make TBODY scrollable, there is one problem with the last column. It will have different width. And it will behave differently when used in FF and Chrome. So I have added extra cell for header and footer by using the below code.


<td widtd="16px" style="background-color:#ffffff; visibility: hidden"> </td>

If the browser is not IE then it will add a extra cell to header. and Similar code is kept in footer to do the same thing.

I don't have much knowledge on browser, but few things were not working fine in Chrome. So kept Javascript which will detect Chrome browser and change the properties accordingly.

var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome')> -1;

if(isChrome){

document.getElementById('scrollHead').style.display ="block";

document.getElementById('scrollBody').style.display ="block";

document.getElementById('scrollFooter').style.display ="block";

document.getElementById('tableHolder2').style.width ="580px";

}

</script>

Rest of the code is explained in the my previous post.

first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column

Scrollable table

2008-07-28T23:46:00.102+05:30

I am able to implemented Complete Scrollable Table which uses only CSS. It Works Fine in IE but may not work properly in other browsers.

This table has fixed header, fixed footer, fixed right column and fixed left column remaining Scrollable Body. Which means it is scrollable in 2 dimension.

Advantages:

Easy to implement.
Multiple rows can be made non-scrollable.
Multiple columns can be made non-scrollable
Also can make table width dynamic.

For people who don't like reading, few points them how to use this code:

Copy the code present in Textbox into HTML file.
Modify the below highlighted part if you want to change width or height.

DIV.tableHolder2 {

OVERFLOW: AUTO;

WIDTH: 600px;

POSITION: relative;

HEIGHT: 200px;

}

Complete Code

<STYLE>
DIV.ScrollTableContainerIE{
 clear: both;
 overflow: AUTO;
 width: 400px;
 height: 300px;
 POSITION: relative;
}
DIV.ScrollTableContainerIE thead td, tfoot td {
 background-color: #1B82E6;
 Z-INDEX: 60;
 position:relative;
}
DIV.ScrollTableContainerIE table{
 border:0px;
 cellspacing:1px;
 cellpading:1px;
 TEXT-ALIGN: center;
}

DIV.ScrollTableContainerIE thead td{
 TOP: expression(this.offsetParent.scrollTop -2);
}
DIV.ScrollTableContainerIE tfoot td{
 TOP: expression(this.offsetParent.clientHeight + this.offsetParent.scrollTop - (this.offsetParent.scrollHeight -2));
}

tr.odd{
 background-color:#FFFFFF;
}
tr.even{
 background-color:#D2E9FF;
}

th.fixedLeft, td.fixedLeft {
 z-index: 60;
 border-right: 1px solid silver;
 border-left: 1px solid silver;
 LEFT: expression(this.offsetParent.scrollLeft -1);
 POSITION: relative;
}
th.fixedRight, td.fixedRight {
 z-index: 60;
 border-right: 1px solid silver;
 border-left: 1px solid silver;
 LEFT: expression(this.offsetParent.clientWidth - this.offsetParent.scrollWidth + this.offsetParent.scrollLeft +1); 
 POSITION: relative;
}
</STYLE>
<DIV class="ScrollTableContainerIE" id="ScrollTableContainerIE">
 <TABLE id="Table0">
  <THEAD id="scrollHeader">
   <TR>
    <TD class="fixedLeft" style="z-Index:70">First Column</TD>
    <TD>Second Column</TD>
    <TD>Third Column</TD>
    <TD>Fourth Column</TD>
    <TD>Fifth Column</TD>
    <TD>Sixth Column</TD>
    <TD>Seventh Column</TD>
    <TD>Eight Column</TD>
    <TD>Ninth Column</TD>
    <TD class="fixedRight" style="z-Index:70">Tenth Column</TD>
   </TR>
  </THEAD>
  <TBODY id="scrollBody">
   <TR class="odd">
    <TD class="fixedLeft">0</TD>
    <TD>0</TD>
    <TD>0</TD>
    <TD>0</TD>
    <TD>0</TD>
    <TD>0</TD>
    <TD>0</TD>
    <TD>0</TD>
    <TD>0</TD>
    <TD class="fixedRight">0</TD>
   </TR>
   <TR class="even">
    <TD class="fixedLeft">1</TD>
    <TD>1</TD>
    <TD>1</TD>
    <TD>1</TD>
    <TD>1</TD>
    <TD>1</TD>
    <TD>1</TD>
    <TD>1</TD>
    <TD>1</TD>
    <TD class="fixedRight">1</TD>
   </TR>
   <TR class="odd">
    <TD class="fixedLeft">2</TD>
    <TD>2</TD>
    <TD>2</TD>
    <TD>2</TD>
    <TD>2</TD>
    <TD>2</TD>
    <TD>2</TD>
    <TD>2</TD>
    <TD>2</TD>
    <TD class="fixedRight">2</TD>
   </TR>
   <TR class="even">
    <TD class="fixedLeft">3</TD>
    <TD>3</TD>
    <TD>3</TD>
    <TD>3</TD>
    <TD>3</TD>
    <TD>3</TD>
    <TD>3</TD>
    <TD>3</TD>
    <TD>3</TD>
    <TD class="fixedRight">3</TD>
   </TR>
   <TR class="odd">
    <TD class="fixedLeft">4</TD>
    <TD>4</TD>
    <TD>4</TD>
    <TD>4</TD>
    <TD>4</TD>
    <TD>4</TD>
    <TD>4</TD>
    <TD>4</TD>
    <TD>4</TD>
    <TD class="fixedRight">4</TD>
   </TR>
   <TR class="even">
    <TD class="fixedLeft">5</TD>
    <TD>5</TD>
    <TD>5</TD>
    <TD>5</TD>
    <TD>5</TD>
    <TD>5</TD>
    <TD>5</TD>
    <TD>5</TD>
    <TD>5</TD>
    <TD class="fixedRight">5</TD>
   </TR>
   <TR class="odd">
    <TD class="fixedLeft">6</TD>
    <TD>6</TD>
    <TD>6</TD>
    <TD>6</TD>
    <TD>6</TD>
    <TD>6</TD>
    <TD>6</TD>
    <TD>6</TD>
    <TD>6</TD>
    <TD class="fixedRight">6</TD>
   </TR>
   <TR class="even">
    <TD class="fixedLeft">7</TD>
    <TD>7</TD>
    <TD>7</TD>
    <TD>7</TD>
    <TD>7</TD>
    <TD>7</TD>
    <TD>7</TD>
    <TD>7</TD>
    <TD>7</TD>
    <TD class="fixedRight">7</TD>
   </TR>
   <TR class="odd">
    <TD class="fixedLeft">8</TD>
    <TD>8</TD>
    <TD>8</TD>
    <TD>8</TD>
    <TD>8</TD>
    <TD>8</TD>
    <TD>8</TD>
    <TD>8</TD>
    <TD>8</TD>
    <TD class="fixedRight">8</TD>
   </TR>
   <TR class="even">
    <TD class="fixedLeft">9</TD>
    <TD>9</TD>
    <TD>9</TD>
    <TD>9</TD>
    <TD>9</TD>
    <TD>9</TD>
    <TD>9</TD>
    <TD>9</TD>
    <TD>9</TD>
    <TD class="fixedRight">9</TD>
   </TR>
   <TR class="odd">
    <TD class="fixedLeft">10</TD>
    <TD>0</TD>
    <TD>0</TD>
    <TD>0</TD>
    <TD>0</TD>
    <TD>0</TD>
    <TD>0</TD>
    <TD>0</TD>
    <TD>0</TD>
    <TD class="fixedRight">10</TD>
   </TR>
   <TR class="even">
    <TD class="fixedLeft">11</TD>
    <TD>1</TD>
    <TD>1</TD>
    <TD>1</TD>
    <TD>1</TD>
    <TD>1</TD>
    <TD>1</TD>
    <TD>1</TD>
    <TD>1</TD>
    <TD class="fixedRight">11</TD>
   </TR>
   <TR class="odd">
    <TD class="fixedLeft">12</TD>
    <TD>2</TD>
    <TD>2</TD>
    <TD>2</TD>
    <TD>2</TD>
    <TD>2</TD>
    <TD>2</TD>
    <TD>2</TD>
    <TD>2</TD>
    <TD class="fixedRight">12</TD>
   </TR>
   <TR class="even">
    <TD class="fixedLeft">13</TD>
    <TD>3</TD>
    <TD>3</TD>
    <TD>3</TD>
    <TD>3</TD>
    <TD>3</TD>
    <TD>3</TD>
    <TD>3</TD>
    <TD>3</TD>
    <TD class="fixedRight">13</TD>
   </TR>               
   <TR class="odd">
    <TD class="fixedLeft">14</TD>
    <TD>4</TD>
    <TD>4</TD>
    <TD>4</TD>
    <TD>4</TD>
    <TD>4</TD>
    <TD>4</TD>
    <TD>4</TD>
    <TD>4</TD>
    <TD class="fixedRight">14</TD>
   </TR>
   <TR class="even">
    <TD class="fixedLeft">15</TD>
    <TD>5</TD>
    <TD>5</TD>
    <TD>5</TD>
    <TD>5</TD>
    <TD>5</TD>
    <TD>5</TD>
    <TD>5</TD>
    <TD>5</TD>
    <TD class="fixedRight">15</TD>
   </TR>
  </TBODY>
  <TFOOT id="scrollFooter">
   <TR>
    <TD class="fixedLeft" style="z-Index:70">First Column</TD>
    <TD>Second Column</TD>
    <TD>Third Column</TD>
    <TD>Fourth Column</TD>
    <TD>Fifth Column</TD>
    <TD>Sixth Column</TD>
    <TD>Seventh Column</TD>
    <TD>Eight Column</TD>
    <TD>Ninth Column</TD>
    <TD class="fixedRight" style="z-Index:70">Tenth Column</TD>
   </TR>
  </TFOOT>
 </TABLE>
</DIV>

Now, I will explain what is happening in the code. First lets go to CSS:
DIV.tableHolder2 {
   clear: both;
   height: 280px;
   width: 600px;
   overflow: auto;
   POSITION: relative;
   font-weight: normal;
   TEXT-ALIGN: center;
}

The above CSS is applied to DIV. Why it is needed?

The answer is very simple. Here we use scroll property of DIV which will help us creating fixed header and footer also fixing columns.

Why Height and Width is applied to DIV?
To make some thing scrollable we need to provide less height or width to it. If we specify less height and width to table, it will not work out. So if we have to make Parent element height or width less than child.
What is Overflow:Auto?
This means Element(Here Div) should get scrollbars when the actual width increases the given width. Here table should be scrollable when it has more height or width. It should not scroll if height or width is less.
Position: Relative
Position DIV relatively to its normal position

thead.scrollHead th, thead.scrollHead td, tfoot.scrollFooter td {
background-color: #1B82E6;
Z-INDEX: 60;
POSITION: relative;
HEIGHT: 20px;
}
Why Z-Index is needed?
The z-index property specifies the stack order of an element. If you don't put z-Index or if you keep less value here, there are more chance of overlapping between adjacent rows when you scroll.
Position: Relative

Generates a relatively positioned element, positioned relative to its normal position
thead.scrollHead td{

TOP: expression(this.offsetParent.scrollTop-2);

}
TOP: expression(this.offsetParent.scrollTop-2);

Expression is IE function which calculate the position of DIV and same position is assigned to THEAD.
tfoot.scrollFooter td{
TOP:expression(this.offsetParent.clientHeight - this.offsetParent.scrollHeight + this.offsetParent.scrollTop);
}

Here expression TOP for TFOOT.

ie., DIV TOP + DIV HEIGHT - 1 ROW(Scroll Height)

th.fixedLeft, td.fixedLeft {

z-index: 50;

border-right: 1px solid silver;

LEFT: expression(this.offsetParent.scrollLeft-2);

POSITION: relative;

}

The above code is for Left column. It will use expression to calculate LEFT position for Left column.

Similiarly Code for Right column.

th.fixedRight, td.fixedRight {

z-index: 50;

border-left: 1px solid silver;

LEFT:expression(this.offsetParent.clientWidth - this.offsetParent.scrollWidth + this.offsetParent.scrollLeft);
POSITION: relative;

}

Now, what all necessary to make scrollable table.

DIV

TABLE,

THEAD,

TBODY,

TFOOT

Working Example:

First Column	Second Column	Third Column	Fourth Column	Fifth Column	Sixth Column	Seventh Column	Eight Column	Ninth Column	Tenth Column
0	0	0	0	0	0	0	0	0	0
1	1	1	1	1	1	1	1	1	1
2	2	2	2	2	2	2	2	2	2
3	3	3	3	3	3	3	3	3	3
4	4	4	4	4	4	4	4	4	4
5	5	5	5	5	5	5	5	5	5
6	6	6	6	6	6	6	6	6	6
7	7	7	7	7	7	7	7	7	7
8	8	8	8	8	8	8	8	8	8
9	9	9	9	9	9	9	9	9	9
10	0	0	0	0	0	0	0	0	10
11	1	1	1	1	1	1	1	1	11
12	2	2	2	2	2	2	2	2	12
13	3	3	3	3	3	3	3	3	13
14	4	4	4	4	4	4	4	4	14
15	5	5	5	5	5	5	5	5	15
First Column	Second Column	Third Column	Fourth Column	Fifth Column	Sixth Column	Seventh Column	Eight Column	Ninth Column	Tenth Column