How to make first and last column of table fixed ?

How to make first and last column of table fixed ?

  

Hi All,

I have a table that displays more than 50 columns. User want to make first and last column fix.

and apply scroll to the middle columns. 

Is anyone have idea, How can we do this?


Thanks in advance.

Hi Gopal, 

May be you can try below JS. I am also trying to implement the same.

https://jsfiddle.net/RMarsh/bzuasLcz/3/


Sachin

Hello Sachin,

Thank you very much for you reply,

I implement this option given in your link but its not a responsive, and someone told me try to avoid javascript.

So is there any other way to do this with css and must be responsive ?


Thanks,


Hi Gopal,


Please try this 

http://jsfiddle.net/YMvk9/656/

I think its solve your problem.

Hi Kavita,

Thank you, Its exact what I want.

In your example only last column is fixed, Can you tell me how to fix first column also?


Thanks



Hi Gopal,

You can use



<div><table>
        <tr>
        <td class="headcol-1">1</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="headcol">1</td>
        </tr>
        <tr>
         <td class="headcol-1">1</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="headcol">1</td>
        </tr> <tr>
        <td class="headcol-1">1</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="headcol">1</td>
        </tr> <tr>
       <td class="headcol-1">1</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="headcol">1</td>
        </tr>
</table></div>


Hello Kavita,

Can you share css?

Solution

Hi,


        body { font:16px Calibri;}
        table { border-collapse:separate; border-top: 3px solid grey; }
        td {
            margin:0;
            border:3px solid grey; 
            border-top-width:0px; 
            white-space:nowrap;
        }
        div { 
            width: auto; 
            overflow-x:scroll;  
            margin-right:5em; 
             margin-left:5em; 
            overflow-y:visible;
            padding-bottom:1px; 
        }
         .headcol-1 {
            position:absolute; 
            width:5em; 
            left:0;
            top:auto;
            border-right: 0px none black; 
            border-top-width:3px; /*only relevant for first row*/
            margin-top:-3px; /*compensate for top border*/
        }
        .headcol {
            position:absolute; 
            width:5em; 
            right:0;
            top:auto;
            border-right: 0px none black; 
            border-top-width:3px; /*only relevant for first row*/
            margin-top:-3px; /*compensate for top border*/
        }
        .headcol:after{content: 'Row ';}
        .long { background:yellow; letter-spacing:1em; }
Solution

Hi Kavita,

Thank you for your help, you solve my problem :)


Thanks

I used this in the past but not sure about component used. May be that component is Freezepane and modify it as per your need.

Hi suraj,

Its working at my end. If you have another example/link related this please share with me.


Thanks

Hi Gopal 

Good to hear that it's working at your end. Currently I don't have any other solution except modifying the freezepane component. 

Freeze Panes

Thanks Suraj,

Its looking great :)