CODEWITHSUNDEEP
htmlhtml-tablewidth
Freewind
Freewind

Reputation: 198188

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

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.

Upvotes: 0

Views: 418

Answers (1)

Michael Low
Michael Low

Reputation: 24506

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>

Upvotes: 1

Related Questions