I have a table within a div within another div, like this:
<div id="outer">
<div class="inner">
<h4>Search results</h4>
<table>
<tr><th>Internal user</th><th>External domain</th><th># in</th><th>Last in</th><th># out</th><th>Last out</th><th>Is member</th></tr>
<tr><td>Person Name</td><td>company.com</td><td>10</td><td>20/07/2014 13:00</td><td>11</td><td>21/07/2014 11:00</td><td>No</td></tr>
<!-- Lots more data rows -->
</table>
</div>
</div>
The table body is dynamically generated by javascript.
The outer div has position:fixed
.
The inner div has overflow:scroll
, and should always fill the outer div but never go outside its borders.
Additionally:
bottom
set to auto
, the inner and outer divs should both expand to fit the entire table; orbottom
set to any fixed value (e.g. "10px"), the inner div should remain within the outer.Similar rules should apply to the width of both divs depending on whether I set the outer div right
to either auto
or a fixed value.
The plan is that I start with bottom:auto
on the outer div while javascript generates the table body, so both divs expand to fit the table.
Then, after the table is complete, I compare the outer div's size to the viewport size.
If the outer div's automatic size fits in the viewport, I leave it as auto
, otherwise I set fixed values to make it fit in the viewport, and the user can scroll to see the rest of the table.
Is there any single set of CSS rules that will achieve this, when the only properties I change in javascript are on the outer div?
The closest I've got is to set both height:100%
and width:100%
on the inner div. The only problem with this is that the inner div's scrollbars go a few pixels outside the outer div.
I've also tried:
position:absolute
and left/top/right/bottom all to 0 on the inner div. This makes both divs go to zero size when the outer div's size is auto
.This would be simpler with only one div instead of two, but two borders of different colours provide better contrast in the web application this is designed for.
Here's a JSFiddle: http://jsfiddle.net/jr5R2
There need to add height: 100%
to both outer and inner div
#outer {
display: block;
position: fixed;
left: 1px;
top: 40px;
width: auto;
right: auto;
bottom: auto;
z-index: 1000;
border: 2px solid silver;
height: 100%;
}
#outer .inner {
background-color: white;
border: 1px solid black;
padding: 2px;
overflow-y: scroll;
height: 100%;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With