S7U.Blogspot.com

Changing comment color for Process Designer

2014-11-05T03:42:00.002+05:30

Go to following path \\IBM\ProcessDesigner\v8.5\teamworks\eclipse\plugins\com.lombardi.jseditor
Open plugin.xml
Modify the following node

Replace the value with following node. Here 0,139, 139 represent dark cyan color.

Find and Replace in Multiple word Docs

2014-10-24T23:55:00.001+05:30

Sub FindReplaceMultipleDocs()
Dim oDoc As Document
Dim fileNameArr(0 To 2) As String

fileNameArr(0) = "C:\Document\A1.doc"
fileNameArr(1) = "C:\Document\A2.doc"

For fileNam = LBound(fileNameArr) To UBound(fileNameArr)

   WordBasic.DisableAutoMacros 1
   Set oDoc = Documents.Open(fileNameArr(fileNam))

   'Iterate through all story types in the current document
   For Each rngStory In ActiveDocument.StoryRanges
    'Iterate through all linked stories
    Do
     With rngStory.Find
      .Text = "<agencyAddress>"
      .Replacement.Text = "<csaAddressLine1>"
      .Wrap = wdFindContinue
      .Execute Replace:=wdReplaceAll
     End With
     With rngStory.Find
       .Text = "<agencyAddressLine1>"
       .Replacement.Text = "<csaAddressLine1>"
       .Wrap = wdFindContinue
       .Execute Replace:=wdReplaceAll
     End With
     'Get next linked story (if any)
     Set rngStory = rngStory.NextStoryRange
    Loop Until rngStory Is Nothing
     Next

   oDoc.SaveAs FileName:=fileNameArr(fileNam)
   oDoc.Close SaveChanges:=wdDoNotSaveChanges

   WordBasic.DisableAutoMacros 0
Next fileNam
End Sub

Import Word Tables into Excel

2014-10-24T23:50:00.001+05:30

Sub ImportWordTableIntoExcel()
Dim wdDoc As Object
Dim TableNo As Integer 'table number in Word
Dim nRow As Long 'row index in Excel
Dim nCol As Long 'row index in Excel
Dim iRow As Long 'row index in Excel
Dim iCol As Integer 'column index in Excel
Dim fileNameArr(0 To 1) As String
fileNameArr(0) = "C:\Documents\A1.doc"
fileNameArr(1) = "C:\Documents\A2.doc"
nRow = 1
For fileNam = LBound(fileNameArr) To UBound(fileNameArr)

  Set wdDoc = GetObject(fileNameArr(fileNam)) 'open Word file

  With wdDoc
   TableNo = wdDoc.tables.Count

   If TableNo > 2 Then
    With .tables(TableNo - 3)
     'copy cell contents from Word table cells to Excel cells
     For iRow = 1 To .Rows.Count
      nCol = 1
      Cells(nRow, nCol) = fileNameArr(fileNam)
      nCol = nCol + 1

      For iCol = 1 To .Columns.Count
       Cells(nRow, nCol) = WorksheetFunction.Clean(.cell(iRow, iCol).Range.Text)
       nCol = nCol + 1
      Next iCol
      nRow = nRow + 1
     Next iRow
    End With
   End If
  End With

  Set wdDoc = Nothing
Next fileNam
End Sub

Get File Names from Child Directory

2014-10-24T23:40:00.008+05:30

Sub GetFilesFromDirectory()
Dim objFSO As Object
Dim objFolder As Object
Dim objSubFolder As Object
Dim i As Integer

'Create an instance of the FileSystemObject
Set objFSO = CreateObject("Scripting.FileSystemObject")
'Get the folder object
Set objFolder = objFSO.GetFolder("C:\Documents\")
i = 1

'loops through each file in the directory and prints their names and path
For Each objSubFolder In objFolder.subfolders
    'loops though each child directory
    For Each objSecSubFolder In objSubFolder.subfolders
       'loops though each file
        For Each objFile In objSecSubFolder.Files
            'print file name
            Cells(i + 1, 1) = objFile.Name
            'print file path
            Cells(i + 1, 2) = objFile.Path
            i = i + 1
        Next objFile
    Next objSecSubFolder
Next objSubFolder

End Sub

IBM BPM 7.5 - Creating Profile

2013-09-11T11:09:00.001+05:30

Normally Profile management tool will be available in following path.

Programs -> IBM - > BPM Standard -> Profile Management Tools.

Click on Profile Management Tools, a window will be displayed.
Click on Launch Profile Management Tool.

Click on Create to create new profile.

Expand the IBM BPM Process Center section and select stand alone profile and click Next.

Select typical profile creation and click next.

Provide Admin ID and password. This is used to login the Websphere admin console.( eg., bpmadmin - > password )

Select Database Type and Enter the Database server names and click Next. (Normally both only one database server is used for process server and performance server with two different schema)

Enter Process server and Performance server schema details and click Next

Verify all the details and click Create.

Profile Creation will start, it will take 15-20 min. You can take short power nap or go for coffee.

Once done, you will be displayed success message. Select Launch the first step console and click Finish.
First Step Console will get launched. You can Start the server.

Go to process center console (use admin id and password for login) and download and install process designer.

IBM BPM 7.5 - Custom Install

2013-09-11T10:35:00.003+05:30

IBM BPM Custom Install has lot many steps compared to Typical Install, but it has many advantages compared to typical. Following are few advantages:

Administrator id can be any id. Instead of using admin as administrator id, you can use twAdmin or bpmadmin as administrator id. This will be very useful when you need to configure Active Directory with admin id disabled.
Can avoid running Database script and hence can configure old database process server and performance server schema.
Customizing the WebSphere install path.

Installation Steps:

Extract all the compressed (zip) files into one folder.

Once all the files are extracted, go to extracted folder (BPM_Std_V751_Windows) and click LaunchPad.exe.

IBM BPM Install window will open and displays a welcome message with installation types.
Click on Custom Installation

Custom Installation screen will be displayed. Select check box Install as administrative user and click Install.

Install Packages screen will be displayed.
Select required packages and click Next. (Here IBM DB2 Express 64 bit is an optional package and not needed if you are using oracle or sql database)

License Agreement will be displayed. Read and accept the License Agreement and click Next.

Specify Installation Directory and click Next. eg., C:\Program Files (x64)\IBM\WebSphere\AppServer

Validate the packages getting installed and click Next

Select bit architecture based on your processor bit size and click Next.

Finally click on Install. The installation will take 15-20 min. Take a power nap ;-)

When installation is complete following screen will be displayed with success message. Next step would be Profile creation.

Installing IBM BPM 7.5 - Typical Install

2013-09-10T23:14:00.000+05:30

These are the steps need to follow to install IBM BPM 7.5 (Typical Install). In Typical Install most of the things will be done automatically. It will install with administrator id/password as admin/admin.
If you want to have different id as administrator id, please use Custom Install.

Extract all the compressed (zip) files into one folder.

Once all files are extracted, go to extracted folder (BPM_Std_V751_Windows) and click LaunchPad.exe

IBM BPM Install window will open and displays a welcome message with installation types.

Click on Typical Installation.
Typical Installation Screen will be displayed, where you will be asked to choose server.
Select Install Process Center and click Next button.

Verify the host name and Installation Directory. And click Next button.

Select the Database Configuration. By default, Embedded DB2 Express Database is selected. If you are planning to use other database, have it configured. (Oracle DB configuration can be found here)

Setup Existing Database server. You will be displayed this screen only when you choose "Use an existing database" option.
Select the Database Type, enter Host Name, Port and System Identifier.
Specify the schema/user details for process server and performance server. Click on Test Database Connection to make sure the details are correct.
Click Next button.

Installation summary will be displayed, read and accept the license agreement.
Click on Instal Software.

Installation will begin. It will take some time (20-30 min) to install.

Once installation is finished. you will be displayed success message.

Configure Oracle DB for IBM BPM Install

2013-09-09T23:15:00.001+05:30

This post will give you information about steps needed to perform in Oracle Database before installing IBM BPM software.

Install Oracle Database. Express edition is good for beginners.
Download Oracle Sql Developer and Configure it to installed database, it will make your life easy. No need to write script for everything.
Login to database with system account. And create a Tablespace. Here is script to create tablespace.

CREATE TABLESPACE BPMDUMP

datafile 'c:\oraclexe\bpm.dbf' size 500M autoextend off

logging

extent management local;

Go to Others -> Create Users and Create Process DB user, Performance DB user and Common DB user.

Enter User Name, Password. (You can follow these names for DB users. BPMDB, COMDB, PDWDB and keep same password)
Select the default tablespace as BPMDUMP and temporary tablespace as TEMP.

Go to Roles Tab and click on Grant All, Admin All and Default All.

Go to System Privileges Tab and click on Grant All and Admin All.

Click on Apply. Script will run and create users with necessary access.
Repeat these steps for all the users.

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