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 str

Answer 1

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 2

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

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>