views:

129

answers:

1

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 its 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?

+1  A: 

To get that behavior you may have to just avoid the CSS table model, and create your own table-style display with floating, setting widths/heights, etc.

fig
My only concern with this solution is that I am trying to avoid manually rendering this in JavaScript. I have been trying to get JavaScript to set the sizes of these elements for a couple weeks, and have decided that a purely declarative solution is much preferable. Is it really impossible?
Giffyguy
@Giffyguy, I didn't mean you'd have to use JavaScript. Was just suggesting using typical CSS. But maybe I'm not getting what you were going for.
fig
Interesting. Maybe it's me who's not getting what you're suggesting. So you're saying that if I use seperate div's for everything, float them where I want, and set the sizes myself, everything should work, right? The problem is that the content is dynamic, loaded from a database, and of unknown size. I just want to be able to show as much of it as possible, but I suppose fixed sizes for the div's would be an acceptable settlement in the short-term, at the very least.
Giffyguy
fig