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
– Bas Slagter, Commented Sep 2, 2011 at 11:22
See following links: stackoverflow.com/questions/296020/… cubido.at/blogs/Lists/Posts/Post.aspx?ID=1259 — Brij
– Brij, Commented Sep 2, 2011 at 11:38
[see if this help][1] [1]: stackoverflow.com/q/3402295/1337735 — user1337735
– user1337735, Commented May 4, 2012 at 11:57

Trevor · Accepted Answer · 2013-11-05 15:27:55Z

1

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.

edited Nov 5, 2013 at 15:27

answered Sep 11, 2013 at 18:04

Trevor

16.1k10 gold badges56 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Trevor Over a year ago

@Neo please mark this answer as accepted if it answered your question, otherwise give feedback on what is not resolved. Thanks

Collectives™ on Stack Overflow

Making the first column of a table fixed on horizontal scroll

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related