Question

I’ve discovered an annoying situation: if I have a table nested inside a div with overflow: auto (or overflow: none or overflow: scroll for that matter), and the table’s width exceeds the window’s width, the dive will cut-off the table and add scroll bars … as it should.

However, if I take that exact same scenario and throw it inside (another) table, suddenly the overflow property stops being respected.

As an example of what I mean, here’s the working case:

<div style="border: 1px solid green; overflow: hidden">
    <table><tr><td><div style="border: 1px solid red; width: 9999px;">a</div></td></tr></table>
</div>

If you look at that in a browser you’ll see a green border, but not a red one, on the right, because the div is hiding the overflow from the table so all you see is its border.

Compare that to the exact same code, wrapped in a table:

<table><tr><td>
    <div style="border: 1px solid green; overflow: hidden">
        <table><tr><td><div style="border: 1px solid red; width: 9999px;">a</div></td></tr></table>
    </div>
</td></tr></table>

You’ll see that there is no right-border, because both elements overflow off the page; if you scroll right far enough you’ll see both borders, because the div never constrained its table.

I get that this is probably happening because TDs calculate their widths differently than other elements, and so the div inside the TD can’t overflow properly because its calculating 100% width “wrong” (although not really wrong per say, just wrong in terms of what I want).

Given that, can anyone help me figure out how to get proper overflow behavior in the “inside a table” case?

Answer 1

Sadly, I wound up having to solve this by removing the outer table (which meant having to revamp the layout entirely). I’d still love to hear if there’s another way though …