Table doesn't want to stretch inside div

I have a <table> inside a <div> tag, which doesn't want to span as long as it needs to be. I need to specify a width in px for the <table> to span and thus cause the <div> container it is inside to scroll. Otherwise, the <table> just spans to a width of 100%, i.e. the width of the <div>.

My example is as follows:

<div style="width:880px; overflow:scroll;">
    <table> // I need to explicitly specify a width for it, otherwise it just span 100% which is incorrect
        <tr><td></td><td></td><td></td></tr>
    </table>
</div>

I have specified for all the <td> tags a width inside my CSS.

I don't understand why the <table> can't determine it's own width or 开发者_StackOverflowjust respect the widths of all the <td> tags.

Try setting white-space: nowrap; on the td in your table and dump a lot of text inside each td you will start seeing a scroll bar on your div.

Are you sure there isn't any unintended CSS being applied to the table? By default the table only expands to accommodate its columns.

<div style="width:880px; overflow:scroll; background-color: green;">
<table style="background-color: red;">
    <tr>
        <td>one</td>
        <td>two</td>
    </tr>
</table>  
</div>

Using this code, you can see the red table is only as big as its columns in relation to the green div as long as no other CSS is involved.

Use a tool like Firebug or IE's Developer Tools (F12) to see which styles are actually being applied to the table element.

See the example here.