Enabling overflow: scroll into table cell with 100% width

Question

Hi,

I'm trying to do the following: http://www.pastebin.org/113337

I'm wondering why the scrolling won't take place? It just stretches the table. Try running the code with and without white-space: nowrap and see how it differs. Whenever I apply nowrap my table gets stretched. How do I avoid this?

Answer 1

I'm pretty sure that's just how tables work; they stretch when there's too much content in one of their cells. Try putting a <div> inside your <td> and apply the width and overflow properties to that instead.

Addendum:

Your table has a CSS width property of 150px while the div has a percentage, %100. Try giving the <div> a non-percentage width...

<table>
    <tr>
        <td>
            <div style="150px;">
                <!-- wtv -->
            </div>
        </td>
    </tr>
</table>

Or try putting the whole <table> in a <div> with a fixed width...

<div style="width:150px">
    <table>
    <!-- wtv -->
    </table>
</div>

... lastly, I'd advise that you put your CSS in an external .css file ;)