Scroll Bars Not Appearing

I need two tables side by side that are independently scrollable

[icon_kid]

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:

<div>
<table width="200px" height="800px" style="float: left" bordercolor="#82a3d2" bgcolor="#C1D2EC">
<tr>
<td>..</td>
</tr>
</table>
<table width="960px" height="800px" style="float: left" bordercolor="#82a3d2" background="../BROOKLYN_map.png" style="overflow:scroll">
<tr>
<td>..</td>
</tr>
</table>
</div>

(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
from this:

<div style="overflow:auto;">

to this:
<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.

[lucy24]

Would you settle for scrolling each table's container separately? You'd have to fudge the width a little bit because no two user-agents' scroll bars are identical. If you allow too little room you get a horizontal scroll bar, which would be ghastly.

It looks like this. The floats had to go; floating should be a relationship of element A to element B, not a reciprocal relationship of A and B to each other. At worst, float only the first table (the one on the left, assuming your target audience reads left to right).

<div style = "height: 200px; overflow: auto; width: 220px;
display: inline-block; background-color: #CDC;">
<table style = "width: 200px; height: 200px; border: 2px solid #82a3d2;
background-color: #C1D2EC;">
<tr>
<td>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br></td>
</tr>
</table>
</div>
<div style = "height: 200px; overflow: auto; width: 220px;
display: inline-block; background-color: #CDC;">
<table style = "width: 200px; height: 100px; border: 2px solid #82a3d2;
background-color: #C1D2EC;">
<tr>
<td>..</td>
</tr>
</table>
</div>

Can you attach overflow properties to a table? I tried and it simply wouldn't play nice, no matter what. Not even on a cell, never mind a whole table :(

---

Now then. I have a lurking suspicion that it would help to take a few steps backward. If you lay out in English what effect you're trying to achieve it may turn out there's some entirely different way to do it. I've got a pretty broad interpretation of "tabular data" --broader, anyway, than your "usability" or "responsiveness" tool-- but a background image? Really? Are you positive it needs to be a table?

[icon_kid]

Thanks lucy24.

Are you positive it needs to be a table?

Yes.

If you lay out in English what effect you're trying to achieve it may turn out there's some entirely different way to do it.

I'm all ears on that one. A picture is worth a thousand words so I've sent you a simulated screen shot of what the page should look like basically -- from there you'll understand why separately scrolling tables are needed for this project. I'll still try to explain it in words.

The layout of this page is going to mimic the way a Google My Maps page is layed out. The layout is simple -- you have two fields. One is a narrow column on the left which contains the names and addresses of the site locations you've saved to your map, vertically arranged. The other field contains the Google street map. The location list scrolls because you may have more than a dozen or so saved. In my case there'll be fifty of more. Of course, the field containing an actual Google map is as large as the entire planet -- talk about "overflow." Anyway, my size for the street map table is 960 X 800 px. The background image used is much larger (1367 X 1465) than the table itself and deliberately so. It is meant that the user is supposed to scroll around a map which has enough detail for practical use, though too large to see the entire map at once, which is not as usefull for this particular project.

Testing your code will be the next thing I'll do.

[lucy24]

One is a narrow column on the left which contains the names and addresses of the site locations you've saved to your map

Wouldn't a form with dropdown options work just as well?

The size of the background-image shouldn't affect scrolling at all. Backgrounds are clipped by default, at least in css 2.

Does this forum have a moderator? I can never remember.

:: scrolling up to check ::

Whoops! Hiya Bill, didn't see you there.

It's possible this question would get more attention next door in the CSS forum. There's obviously a lot of overlap in the subject area.

[icon_kid]

Wouldn't a form with dropdown options work just as well?

No, it would not. The left columb (table) must be an open, scrollable list of names and addresses.

The size of the background-image shouldn't affect scrolling at all.

That's OK -- I was just wondering about it -- if I could have scroll bars appear according to a background's dimensions before placing any data, (a mere convenience in laying out the page as I construct it) which is not really necessary being that both tables will eventually be filled with data that does exceed their dimensions.

It's possible this question would get more attention next door in the CSS forum.
Perhaps so.

[icon_kid]

Wow, lucy24 -- your code is simple and it actually works. I now have two scrollable tables side by side. I don't really care to look back at what I was doing wrong, I just want to keep moving forward.
Thank you very much.

[lucy24]

Actually you don't have any scrollable tables. You have two complete tables-- each hidden inside a scrollable div. But as long as you never meet a browser with extrely wide or extremely narrow scroll bars, the user won't know.