I am working with a div that contains multiple tables structured like this:
<div id="div1">
<div id="div2">
<div id="div3">
<table id="table1"><tr><td></td></tr></table>
<table id="table2">
<tr></td></td></td></td></tr>
<tr></td></td></td></td></tr>
</table>
</div>
</div>
</div>
My issue is that when table2 has many rows, I use CSS overflow to show horizontal scroll bars. However, these scroll bars also affect table1 as it scrolls down along with the rest of the content. How can I make sure that table1 remains fixed and does not scroll down?
Thank you for any help!