Reputation: 2696
Put scroll bar at the end of div tag
I am having three tables in side a div (MainDiv) with max-width:200px and max-height: 400px And i BodyDiv with auto size and max-height: 300px.
I need a scroll in X direction in (MainDiv) And a scroll in Y direction of BodyDiv. So that from MainDiv scroll I can scroll all three tables.
But it shows only three columns of BodyDiv and puts a scroll bar at 200px position. I need this scroll at the end of BodyDiv.
Here is my code:
Code
<div id="MainDiv" style="max-width:200px;max-height: 400px;overflow-X: auto;overflow-Y: hidden;">
<table style="background-color:Fuchsia;width:100%;">
<tr >
<td class="Cell">
column1
</td>
<td class="Cell">
column2
</td>
<td class="Cell">
column3
</td>
<td class="Cell">
column4
</td>
<td class="Cell">
column5
</td>
</tr>
</table>
<div id="BodyDiv" style="max-height: 300px;overflow-Y: visible;overflow-X: hidden;">
<table style="width:100%;">
<tr class="tr_even">
<td class="Cell">
column1
</td>
<td class="Cell">
column2
</td>
<td class="Cell">
column3
</td>
<td class="Cell">
column4
</td>
<td class="Cell">
column5
</td>
</tr>
<tr class="tr_odd">
<td class="Cell">
column1
</td>
<td class="Cell">
column2
</td>
<td class="Cell">
column3
</td>
<td class="Cell">
column4
</td>
<td class="Cell">
column5
</td>
</tr>
<tr class="tr_even">
<td class="Cell">
column1
</td>
<td class="Cell">
column2
</td>
<td class="Cell">
column3
</td>
<td class="Cell">
column4
</td>
<td class="Cell">
column5
</td>
</tr>
<tr class="tr_odd">
<td class="Cell">
column1
</td>
<td class="Cell">
column2
</td>
<td class="Cell">
column3
</td>
<td class="Cell">
column4
</td>
<td class="Cell">
column5
</td>
</tr>
<tr class="tr_even">
<td class="Cell">
column1
</td>
<td class="Cell">
column2
</td>
<td class="Cell">
column3
</td>
<td class="Cell">
column4
</td>
<td class="Cell">
column5
</td>
</tr>
<tr class="tr_odd">
<td class="Cell">
column1
</td>
<td class="Cell">
column2
</td>
<td class="Cell">
column3
</td>
<td class="Cell">
column4
</td>
<td class="Cell">
column5
</td>
</tr>
<tr class="tr_even">
<td class="Cell">
column1
</td>
<td class="Cell">
column2
</td>
<td class="Cell">
column3
</td>
<td class="Cell">
column4
</td>
<td class="Cell">
column5
</td>
</tr>
<tr class="tr_odd">
<td class="Cell">
column1
</td>
<td class="Cell">
column2
</td>
<td class="Cell">
column3
</td>
<td class="Cell">
column4
</td>
<td class="Cell">
column5
</td>
</tr>
<tr class="tr_even">
<td class="Cell">
column1
</td>
<td class="Cell">
column2
</td>
<td class="Cell">
column3
</td>
<td class="Cell">
column4
</td>
<td class="Cell">
column5
</td>
</tr>
<tr class="tr_odd">
<td class="Cell">
column1
</td>
<td class="Cell">
column2
</td>
<td class="Cell">
column3
</td>
<td class="Cell">
column4
</td>
<td class="Cell">
column5
</td>
</tr>
<tr class="tr_even">
<td class="Cell">
column1
</td>
<td class="Cell">
column2
</td>
<td class="Cell">
column3
</td>
<td class="Cell">
column4
</td>
<td class="Cell">
column5
</td>
</tr>
<tr class="tr_odd">
<td class="Cell">
column1
</td>
<td class="Cell">
column2
</td>
<td class="Cell">
column3
</td>
<td class="Cell">
column4
</td>
<td class="Cell">
column5
</td>
</tr>
<tr class="tr_even">
<td class="Cell">
column1
</td>
<td class="Cell">
column2
</td>
<td class="Cell">
column3
</td>
<td class="Cell">
column4
</td>
<td class="Cell">
column5
</td>
</tr>
<tr class="tr_odd">
<td class="Cell">
column1
</td>
<td class="Cell">
column2
</td>
<td class="Cell">
column3
</td>
<td class="Cell">
column4
</td>
<td class="Cell">
column5
</td>
</tr>
<tr class="tr_even">
<td class="Cell">
column1
</td>
<td class="Cell">
column2
</td>
<td class="Cell">
column3
</td>
<td class="Cell">
column4
</td>
<td class="Cell">
column5
</td>
</tr>
<tr class="tr_odd">
<td class="Cell">
column1
</td>
<td class="Cell">
column2
</td>
<td class="Cell">
column3
</td>
<td class="Cell">
column4
</td>
<td class="Cell">
column5
</td>
</tr>
<tr class="tr_even">
<td class="Cell">
column1
</td>
<td class="Cell">
column2
</td>
<td class="Cell">
column3
</td>
<td class="Cell">
column4
</td>
<td class="Cell">
column5
</td>
</tr>
<tr class="tr_odd">
<td class="Cell">
column1
</td>
<td class="Cell">
column2
</td>
<td class="Cell">
column3
</td>
<td class="Cell">
column4
</td>
<td class="Cell">
column5
</td>
</tr>
<tr class="tr_even">
<td class="Cell">
column1
</td>
<td class="Cell">
column2
</td>
<td class="Cell">
column3
</td>
<td class="Cell">
column4
</td>
<td class="Cell">
column5
</td>
</tr>
</table>
</div>
<table style="background-color:Fuchsia;width:100%;">
<tr >
<td class="Cell">
column1
</td>
<td class="Cell">
column2
</td>
<td class="Cell">
column3
</td>
<td class="Cell">
column4
</td>
<td class="Cell">
column5
</td>
</tr>
</table>
Upvotes: 0
Views: 1919
Answers (4)
Reputation: 2696
This problem is solved by adding the fixed width of inner div (BodyDiv) tag. It puts scroll bar at the end of div. And when we scroll Main Div it scrolls all three tables.
Upvotes: 0
Reputation: 5236
You are specifying your BodyDiv to be 100% width. This will mean that (including the scrollbar when present) it will only ever be 100% of the width of its parent (MainDiv at 200px wide).
The only way you can make BodyDiv larger than its parent is to use fixed width values, which may also cause you some issues because different browsers have slightly different scrollbar widths.
Upvotes: 0
Reputation: 687
Looks like the containing DIV should have overflow-X:hidden; overflow-Y:auto not the other way around?
You'll also need to give the container DIV a little more height to fit all three DIVs inside.
Upvotes: 0
Reputation: 5236
Knowing what browser you are seeing the issue in would help. It looks mostly fine to me in Chrome.
Having both divs set to a max-height of 400px you are overloading the size of the outer div (height of first table + height of middle table + height of last table will always be greater than 400px when the middle table is allowed to expand to 400px), so the bottom table will be "pushed" out of the viewable area of the outer div.
Upvotes: 1
Related Questions
- How do I add a horizontal scrollbar to a table in a div?
- add scroll bar to table body
- Scroll bar inside a div with table
- Scrollbar for Table
- Add scroll bar in div inside a table
- Add scrollbar to table
- How to add scroll bar on table?
- How to place scroll bar on side of table?
- How to add a scroll bar to my table?
- How can I add a scrollbar to a DIV that contains a table?