Fix multiple columns in html table (JQuery)

Question

I am looking for a way to freeze first three columns in html table. Sample of table: http://jsfiddle.net/ee6reLug/

...

Answer 1

Enclose the table in a div and set a margin-left say 15em. Also set overflow-x:scroll

.outer { 
   overflow-x:scroll;  
   margin-left:15em; 
   overflow-y:visible;
}

Now for the first 3 columns have separate classes and set position:absolute and left to 0em, 5em and 10em respectively.

.headcol1 {
    position:absolute; 
    width:5em;  
   left:0;
   top:auto;
}

.headcol2 {
   position:absolute; 
   width:5em;  
   left:5em;
   top:auto;  
}

.headcol3 {
   position:absolute; 
   width:5em; 
   left:10em;
   top:auto;
}

Demo here

PS: I have some problems setting the column heights. If someone could fix that it will be helpful.