Overflow:scroll in a table cell - works in Chrome, doesn't work anywhere else

Question

I'm trying to get a scrollbar show up in a table cell whose content may grow bigger than the original table cell size, and I don't want the whole table to stretch out.

Here's the example on jfiddle. As you can see, it works in Google Chrome, but doesn't work in Firefox nor in IE: they just behave as if there was no overflow:scroll at all. Haven't tried it in Safari, but I suspect that won't work either.

So, who's at fault here, Chrome for implementing something which isn't supposed to be supported, or all the others? Update: to be clear, it's not the cell itself that is being overflowed, but a div I put into it. The code looks like this:

<table>
    <tr>
        <td class="header">
            <div class="header">Header</div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="scroll">
                ... VERY BIG CONTENT HERE ... 
            </div>
        </td>
    </tr>
    <tr>
      <td class="footer">
        <div class="footer">Footer</div>
      </td>
    </tr>
</table>

You can see it all over at jfiddle.

What I'm trying to achieve is a layout by which the available space between the header and the footer is completely filled out and if the space gets exhausted then it gets a scrollbar, not the whole window. I've come to understand, even by wading here on Stack Overflow, that With CSS alone, using just DIV's, this is not achievable (using absolute positioning isn't an option, because the elements are taken out of the normal flow and an "extreme" window resizing will cause elements to overlap).

Update: the flexbox model seems to be exactly what is needed in these cases. However, I suppose we can't rely on it being implemented broadly, still.

Answer 1

Is this what you are trying to achieve http://www.cssplay.co.uk/layouts/basics2.html?

Answer 2

If you look in the CSS spec you'll find the result of using rules like position and overflow on table elements are actually undefined. In fact tables have their own complicated layout rules that conflict with many CSS rules and the spec pretty much leaves it up to browsers to do what they want.

So to answer part of your question, it's really nobody's fault. No browser is right or wrong.

As for what to do about it you best option is to not use a table and failing that try embedding a div in the table cell and apply your rules to that.

UPDATED FOR YOUR EDIT

What you are trying to do conflicts with the table layout algorithm. What tables do by default is resize their cells to fit the contents of the row/column. Scrollbar notwithstanding You're trying to stop it doing that which is something not defined in the spec. There is no 'correct' way for browsers to do what you're asking with a table cell.

Your only real solution, other than relying on hacks and luck, is to listen to what people are saying and stop trying to achieve this layout using a table. There is nothing in your design that couldn't be achieved with 3 divs and right type of layout - especially if you don't care about IE6. That is the ideal solution you should be aiming for.

Answer 3

Couldn't you just make that into three separate tables with the middle table surrounded by a div so you can apply a scroll to it?

div {
    overflow-y:scroll;
    //set height to however large you would like your scrollable area to be
}
<table>
    <tr>
        <td class="header">
            <div class="header">Header</div>
        </td>
    </tr>
</table
<div>
    <table>
        <tr>
            <td>
                <div class="scroll">
                    ... VERY BIG CONTENT HERE ... 
                </div>
            </td>
        </tr>
    </table>
</div>
<table>
    <tr>
        <td class="footer">
            <div class="footer">Footer</div>
        </td>
    </tr>
</table>