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.

is table required for the layout you're after? If not, you're better off using divs to layout your page. — William Niu, Apr 09 '11 at 01:59
Hey William. I wasn't probably clear enough, but the table layout is what comes closest to what I need. Using DIVS just doesn't seem possible in this case. There's plenty of similar requests on StackOverflow about this, and the answer is always the same. The closest, with DIV's, is to use absolute positioning, but then when the window is too small the elements overlap, which is something I don't want. — Fabio A., Apr 09 '11 at 11:13

score 1 · Answer 1 · answered Apr 09 '11 at 01:56

1

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

answered Apr 09 '11 at 01:56

Unknown_Guy

948
9
17

Good one, thanks! However, the footer and the header will overlap, this way, and the scrollbar will seem attached to the outer container rather than just to the part that needs scrolling. Aestetically this is not what I want to achieve. :( – Fabio A. Apr 09 '11 at 11:24
Then I guess something like this [http://www.cssplay.co.uk/layouts/bodyfix.html](http://www.cssplay.co.uk/layouts/bodyfix.html). I don't understand why are you so worried about footer/header overlaping as having so small window isn't very usable anyway. – Unknown_Guy Apr 09 '11 at 14:51
And your example doesn't work because there is no height defined for td and that causes the div's height not to work. – Unknown_Guy Apr 09 '11 at 15:13

SpliFF · Answer 2 · 2011-04-10T03:47:20.683

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.

Probably I was not clear enough, I've updated the post to explain it better: I am already using a div within the td element, that's the odd thing. :-/ — Fabio A., Apr 09 '11 at 11:25

score 0 · Answer 3 · answered Jul 30 '13 at 00:51

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>

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

3 Answers3

Linked