Big Tables with fixed headers (eg. 1000 Rows and 200 Columns)

There have been a lot of solutions on the innernet when I searched for tables with fixed headers. Most of them worked pretty much the way the demonstration was made in those websites.

But all of them had a lot issues when the size of the table got bigger. Especially with a table containing 1000 + rows and 200+ columns, literally all available examples choked and I had a lot of issues reusing them.

Some of the issues that I encountered during the course of this R&D are as follows

1. Position:fixed would have been used and hence I will not be able to scroll towards right to find new column titles
2. Position-y or Position-x: fixed was not available
3. Ready made solutions which had a fix to the above mentioned points were mostly from jquery and they choked out the browser making them squell with an error page saying some script is running which stops the page from loading on time - DO YOU WANNA KILL IT???
4. Minimizing the table size was not an option
5. Had to think through the tableCellElement.offsetWidth
6. Gave a thought about creating headers with multiple separate div tags and displaying them simultaneously
7. Even solutions that helped admist all these issues required me to scroll through the entire 200+ columns to see the vertical scroll
8. Un even table cell widths

on and on and so on....

Eventually the following seemed promising to me and it did work well with both ie and chrome.

Step 1: I used the following inline styles

table {width:auto;}
thead {  position: absolute;}
thead th { height:50px; }
tbody { height:150px; overflow: scroll; }
tbody td { height:60px;}

Step 2: following is a supportive script that will help your table header stay in tact. This includes a timer

var interval = "";
  var itr = 0;
  var repeatDuration = 100;
  interval = window.setInterval("myfunc()", repeatDuration);

function myfunc() {

if (document.all) {
document.getElementsByTagName("thead")[0].style.left="-"+document.documentElement.scrollLeft+"px"
document.getElementsByTagName("thead")[0].style.top=document.documentElement.scrollTop+"px"
} else {
document.getElementsByTagName("thead")[0].style.left="-"+document.body.scrollLeft+"px"
document.getElementsByTagName("thead")[0].style.top=document.body.scrollTop+"px"
}

}
Step 3: Construct your table and view it on the browser.

Hurray I was able to do it atlast. Try it out and let me know if it works in firefox and safari too :)