Table squashing to fit (css)

If I put a table that naturally would be 800px wide in a div that is 700px wide, even with the css propert开发者_高级运维y overflow:scroll; set, the table is still 'squashed' into the the 700px space.

Is there any html or css I can edit/re-architect to fix this?

check this may resolve issue

table
{
table-layout:fixed;
}

this will be your required markup

<div style="width:700px; height:300px; overflow:auto; border:1px solid red;">
    <table width="800" border="1">
        <tr><td> Col 1 </td> <td> col 2 </td></tr>
    </table>
</div>

Not according to this test http://jsfiddle.net/6J9AB/1/

Are you sure it is not something else ?

Do you define the table width to be 800px ? (how would it otherwise be 800px naturally ?)