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

answering it late.. but useful for someone searching for a solution

I've changed your code to this --> http://jsfiddle.net/PrateekPatra26/ee6reLug/5/

Separated the tables into two, one with 3 columns and the remaining table into another. Put them into div's and gave them specific width.

the css:

.pull-left {
    float: left!important
}
.pull-right {
    float: right!important
}
th{
    height:40px;
}
td{
    height:60px;
}

div's:

<div style="width:100%" class="pull-left">
    <div class='pull-left' style='width:30%'>
       <table>
       .
       .
       .
       </table>
    </div>
    <div class='pull-right' style='width:70%;overflow-x:auto'>
       <table>
       .
       .
       .
       </table>
    </div>
</div>

Answer 2

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.