How do you make a CSS-defined table-cell scroll?
Posted
by Giffyguy
on Stack Overflow
See other posts from Stack Overflow
or by Giffyguy
Published on 2010-04-29T22:23:15Z
Indexed on
2010/04/29
22:27 UTC
Read the original article
Hit count: 468
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?
© Stack Overflow or respective owner
