html - How to let width of a table depend on the td's width?

Question

I have a table which has a inner table. I don't want to set the table's width, but the td's width:

<table border="1">
    <tr>
        <td width="200">left menus (200px)</td>
        <td>
            <table border="1" class="table-fixed" style="background-color:#ddd" >
                <tr>
                    <td width="2000">2000px</td>
                    <td width="2000">2000px</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

You can see the inner table has two tds, the total width is 4000, which is wider than the browser.

But in the browser, the table is automatically shrank to fit the browser. How to let the table displays by it's actual width ( 200+2000+2000 here ).

If I set the table's width as:

<table width="4200">
    ...
            <table width="4000">
    ...
</table>

It will be displayed as I expected, but I don't want to. Since the columns of inner table are dynamic, I don't get the total width before running.

Answer 1

You can use CSS min-width to force that.

http://jsfiddle.net/kM6DQ/

<table border="1">
    <tr>
        <td width="200">left menus (200px)</td>
        <td>
            <table border="1" class="table-fixed" style="background-color:#ddd" >
                <tr>
                    <td class="wide">2000px</td>
                    <td class="wide">2000px</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

<style>
td.wide { width:2000px; min-width:2000px; }

</style>