How do you make a CSS-defined table-cell scroll?
- by Giffyguy
I want to be able to set the height of the table, and force the cells to scroll individually if they are larger than the table.
Consider the following code: (see it in action here)
<div style="display: table; position: absolute;
width: 25%; height: 80%; min-height: 80%; max-height: 80%;
left: 0%; top: 10%; right: 75%; bottom: 10%; border: solid 1px black;">
<div style="display: table-row;">
<div style="display: table-cell; border: solid 1px blue;">
{Some dynamic text content}<br/>
This cell should shrink to fit it's contents.
</div>
</div>
<div style="display: table-row;">
<div style="display: table-cell; border: solid 1px red;
overflow: scroll;">
This should only take up the remainder of the table's vertical space.
This should only take up the remainder of the table's vertical space.
This should only take up the remainder of the table's vertical space.
This should only take up the remainder of the table's vertical space.
This should only take up the remainder of the table's vertical space.
This should only take up the remainder of the table's vertical space.
This should only take up the remainder of the table's vertical space.
This should only take up the remainder of the table's vertical space.
</div>
</div>
</div>
If you open this code (in IE8, in my case) you'll notice that the second cell fits in the table nicely when the browser is maximized. In theory, when you shrink the browser (forcing the table to shrink as well), a vertical scrollbar should appear INSIDE the second cell when the table becomes too small to fit all of the content. But in reality, the table just grows vertically, beyond the bounds set by the CSS height attribute(s).
Hopefully I've explained this scenario adequately...
Does anyone know how I can get this to work?
