Using CSS to Apply a Scroll Lock on the first few columns on my table

[ahallak2016]

Hi all,

I would just like to mention that I'm horrible with CSS and unfortunately am tackling a problem that is way outside my comfort zone.

I would like to freeze the first few columns (first 3 or 4 columns) so that when a user is scrolling right on the table, these columns remain visible on the screen. Basically, I'm trying to replicate the pane freeze feature in excel but am experiencing alot of difficulty achieving this.

Currently, I have a table:

<row>
   <panel>
      <table id="table1">
         <search base="base">
            <query>| table region location dept * total</query>
         </search>
       </table>
   </panel>
</row>

I have some basic CSS (which isn't working):

#table1.table-wrapper{
   overflow-x:scroll;
   overflow-y:visible;
   width:250px;
   margin-left:120px;
}

#table1.td{
   padding:5px 20px;
   width:100px;
}

#table1.th{
   padding:5px 20px;
   width: 100px;
}

#table1.th:first-child{
   position:fixed;
   left:5px;
}

[sandeepmakkena]

Add "position: absolute;" first 3 or 4 columns what you wanted to be freeze.

Something like this
.headcol {
position: absolute;
width: 5em;
left: 0;
top: auto;
border-top-width: 1px;
/only relevant for first row/
margin-top: -1px;
/compensate for top border/
}

[sandeepmakkena]

Did this work ?

[mpreddy]

Hi ,

Any one have working code(java script or css) to freeze ONLY first column when scrolling that table to right or left, I had a table with 65 columns.

Thanks

[nagar57]

Have you made it working ?? I also have the same requirement but don't have any knowledge of CSS and JS.