0

I have 2 divs that are aligned adjacent to each other. Each of these divs contain a table with equal number of rows.

<div id="one" style="width:100px; height:200px; overflow-x:scroll; overflow-y:hidden;">
    <table id="tab1">
        contains 3 columns and 50 rows
    </table>
</div>

<div id="two" style="width:845px; height:200px; overflow-x:auto; overflow-y:auto;">
    <table id="tab2">
        contains 12 columns and 50 rows
    </table>
</div>

when I scroll vertically <div id="two" ..., I would like the <div id="one" ... to also scroll to the same position.I have written the below code which is working well in FireFox and chorme, however in IE9, the scrollTop does not align them correctly.Sicne each of these divs contain tables with 50 rows each, I can see the difference as I continue to scroll more towards the bottom as the rows do not align synchronously.

$("#two").scroll(function(){ 
    $('#one').scrollTop($('#two').scrollTop());
});

The Difference in IE8 is slighlty better than IE9. How can I fix this in IE9 ?

1 Answer 1

0

I fixed this issue by giving a fixed height to every row in the table.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.