Adding scroll bars to 2 tables

Question

I am trying to display 2 individual scroll bars for 2 tables wrapped inside a div.

My code is as follows

<html>
<body>



<div style="width:300px;background:#00CC33;height:100px;">
<div style="width:150px;float:left;">
<table width="100px" border="1">
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr><tr>
  <td>100</td>
</tr><tr>
  <td>100</td>
</tr>

</table>
</div>
<div style="width:100px;float:left;">
<table width="100px" border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>

</table>

</div>
</body>
</html>

What I tried: I tried to use overflow:scroll; but when I am doing so both the tables are getting wrapped in one scroll bar.

Above mentioned tables are dynamically generated. demo: http://jsfiddle.net/HLyDq/

score 1 · Accepted Answer · answered Feb 18 '13 at 09:19

1

Add the following Styles to the two table-parent divs:

<div style="...;overflow-y:auto;max-height:100px;">

JsFiddle: http://jsfiddle.net/gQyYe/

answered Feb 18 '13 at 09:19

Savedro

88
1
7

Raghavan Kandala · Answer 2 · 2013-02-18T10:11:07.993

You have to specify the height:100px and the overflow:auto styles to the DIV which is the immediate parent of each Table.

Here is the corrected code

    <html>
<body>



**<div style="width:300px;background:#00CC33;height:100px;">
<div style="width:150px;float:left;height:100px;overflow:auto;">**
<table width="100px" border="1">
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr><tr>
  <td>100</td>
</tr><tr>
  <td>100</td>
</tr>

</table>
</div>
**<div style="width:100px;float:left;height:100px;overflow:auto;">**
<table width="100px" border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>

</table>

</div>
</body>
</html>

The code enclosed between a pair of ** are the corrected lines. Check this JSFiddle - http://jsfiddle.net/yYxuN/1/

Hope this helps

yup. Your solution works. I am wondering why background color of outermost div is lost in your solution — Abhijit Gaikwad, Feb 18 '13 at 09:32

score 0 · Answer 3 · edited May 23 '17 at 10:32

0

there's an answer here that can be helpful - I hope. I'd prefer overflow:auto;in any case

edited May 23 '17 at 10:32

Community

1
1

answered Feb 18 '13 at 09:09

tattvamasi

845
1
7
14

Adding scroll bars to 2 tables

3 Answers3