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/

<table>
...
</table>

Columns Column name1, "+" and Column name2 must be fixed and scrollable from left to right.

There is a demo for single fixed left column, how do I create an HTML table with fixed/frozen left column and scrollable body?

but I need multple columns fixed. Is it possible in html, javascript or jquery?

possible duplicate of [how do I create an HTML table with fixed/frozen left column and scrollable body?](http://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-fixed-frozen-left-column-and-scrollable-body) — vdwijngaert, Apr 22 '15 at 11:01

score 3 · Accepted Answer · answered Sep 22 '15 at 07:18

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>

score 1 · Answer 2 · answered Apr 22 '15 at 11:29

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.

Fix multiple columns in html table (JQuery)

2 Answers2