I have two tables side by side and I need them to be independently scrollable.
Below is the initial code in the body of that document:
<table width="200px" height="800px" style="float: left" bordercolor="#82a3d2" bgcolor="#C1D2EC">
<table width="960px" height="800px" style="float: left" bordercolor="#82a3d2" background="../BROOKLYN_map.png" style="overflow:scroll">
(The DIV tag is there to make the tables sit side-by-side instead of one on top of the other)
I changed this: <div>
to this: <div style="overflow:auto;">
...and also gave a 'background' attribute of one of the tables as [style="overflow:scroll"] without producing scroll bars.
One author stated that [paraphrase] "you need to specify the dimensional limits -- beyond which scroll bars will appear when the table size has been exceeded -- otherwise, the table itself will stretch to the size of the data (which loses the scroll bar and lengthens the dimensions of the whole page accordingly, which I found to be true upon testing, so I changed the DIV tag again
<div class="scroll" style="width:960; height:800; overflow: auto;"> but this didn't produce scroll bars either, not to mention that the two tables would still not be independently ranged as far as their scroll limits anyway.
What you see in the table data in these examles consist of only two dots each, however this code has been tested with data that exceeds the table sizes with no scrolls.