Making the first column of a table fixed on horizontal scroll

Question

Thanks for Reading. I have a table inside a div container(div0).The table is populated with data and is dynamically generated. So the height and width of table is not fixed.The outer div can be scrolled both vertically and horizontally to view the entire table. Now the requirement is that I need to fix the poistion of first column of the table horizontally i.e On scrolling the horizontal scrollbar, the first column should be fixed and rest should scoll. Just need some pointers on this, on how to achive this?

I am thinking of separating the first column contents (which is not scrollable horizontally) in a div(div1), and other the scrollable contentents in separate div(div2) both placed in table with one row and 2 tds. Now I am getting 2 probs with this approach, 1 the scrollbar of div 2 is getting inside the div0 when I scroll right(Thought of using a jquery scrollbatr but how to position it outside the div2). Second is the alignent between the two divs.

I think your own suggestion is the way to go....the problems you descibe are a bit unclear...maybe you can add some example code or example address where we can look? — Bas Slagter, Sep 02 '11 at 11:22
See following links: http://stackoverflow.com/questions/296020/how-can-i-lock-the-first-row-and-first-column-of-a-table-when-scrolling-possibly http://www.cubido.at/blogs/Lists/Posts/Post.aspx?ID=1259 — Brij, Sep 02 '11 at 11:38
[see if this help][1] [1]: http://stackoverflow.com/q/3402295/1337735 — , May 04 '12 at 11:57

Trevor · Answer 1 · 2013-11-05T15:27:55.900

If I understand what your looking for; I did something similar not too long ago.

Html could look something like this.

<table border="1" id="header">
    <tr>
       <th></th>
       <th></th>
    </tr>
 </table>
 <div id="tableData">
   <table border="1" id="table">
       <td></td>
       <td></td>
   </table>
 </div>

CSS

#tableData {
   overflow: scroll;
   overflow-x:hidden;
   height: 190px;
   border-bottom: 1px solid #B5B3B3;
   width: 940px;
}

JavaScript to make sure the header aligns with the table data

$("#tableData").height(190);
$("#tableData").width(940);
for(var i=1;i<8;i++){
    if($("#header th:nth-child("+i.toString()+")").width() >= $("#table td:nth-child("+i.toString()+")").width())
        $("#table td:nth-child("+i.toString()+")").width($("#header th:nth-child("+i.toString()+")").width());
    else
        $("#header th:nth-child("+i.toString()+")").width($("#table td:nth-child("+i.toString()+")").width());
}
$("#tableData").width($("#table").width()+20);
if($("#table").height() <= $("#tableData").height()) 
   $("#tableData").height($("#table").height());

You might need to make some tweaks but that is one solution. The i variable needs to cover each column, in my example it would work for 7 columns.

@Neo please mark this answer as accepted if it answered your question, otherwise give feedback on what is not resolved. Thanks — Trevor, Nov 07 '13 at 17:55

Making the first column of a table fixed on horizontal scroll

1 Answers1