Table won't overflow

Question

I have a table with a variable number of columns that I want to place in a fixed width div.

I want the table columns to have a fixed width and the table to overflow horizontally inside the div if it gets too wide.

However the table seems to resize itself to fit inside the div.

<style>
table,td{
    border:1px solid black;
}
</style>
<div style="overflow:auto;width:500px;border: 1px solid red">

<table>
<tr>
    <td style="width:100px">a</td>
    <td style="width:100px">a</td>
    <td style="width:100px">a</td>
    <td style="width:100px">a</td>
    <td style="width:100px">a</td>
    <td style="width:100px">a</td>
    <td style="width:100px">a</td>
</tr>
</table>

</div>

I can hack around this by setting the table to a fixed width greater than the div. But the table has a variable number of columns so I would rather not do this.

Is there a better way?

Thanks for any suggestions.

Answer 1

You're going to have set an explicit width on the table (use CSS for this of course). Presumably, if the columns are generated dynamically, it wouldn't be too hard to compute the width dynamically either. You'll have to use inline CSS but oh well, this is a proper case for it.

Answer 2

You can use

<table>
<tr>
    <td style="min-width:100px;max-width:100px">a</td>
    <td style="min-width:100px;max-width:100px">a</td>
    <td style="min-width:100px;max-width:100px">a</td>
    <td style="min-width:100px;max-width:100px">a</td>
    <td style="min-width:100px;max-width:100px">a</td>
    <td style="min-width:100px;max-width:100px">a</td>
    <td style="min-width:100px;max-width:100px">a</td>
</tr>
</table>

But I might have problems for IE < 8.