proportionally increase/decrease the wrapper

Question

demo

html...

<div id="main">
    <table>
        <tr>
            <td><img src="" width="200" height="100" /></td>
            <td>
                <img src="" width="50" height="30" />
                <img src="" width="50" height="30" />
                <img src="" width="50" height="30" />
            </td>
            <td><img src="" width="100" height="100" /></td>
        </tr>
        <tr>
            <td style="color: blue; background-color: yellow;">some text here</td>
            <td colspan=2 style="color: white; background-color: blue;">next goes here</td>
        </tr>
    </table>
</div>

css...

img{
    background-color: red;
    display: block;
    border: 2px solid white;
}

What I have tried :

#main table{
    width: 200px;
    display: table;
    table-layout: fixed;
}

demo

What I want is here:

Original size:

When I re-size the main:

Answer 1

Use zoom property, for example :

#main table{
    width: 300px;
    display: table;
    table-layout: fixed;
    zoom: 0.4;    
 }

Answer 2

I have checked your code.

But the way you are trying to do this, is not possible because the parent table takes the cumulative width of all the <td>'s in the row with the highest no of <td>'s.

Hence your table takes the width of the first <tr>.

To reach your goal you can follow the following steps-

1. Each <tr> will contain only one <td>.
2. That <td> will contain another table. i.e. In the <td> of the first <tr> of the given table you should write the code of a table containing the 1st row of the current given table.
3. In the <td> of the 2nd <tr> of the given table you have to accomodate another table with 2 <td>s of the 2nd <tr> in your current table.

check the new demo or the following HTML code-

<div id="main">
<table>
    <tr>
        <td>
            <table width=100% style="overflow-x:hidden">
                <tr>
                    <td>
                        <img src="" width="200" height="100" />
                    </td>
                    <td>
                        <img src="" width="50" height="30" />
                        <img src="" width="50" height="30" />
                        <img src="" width="50" height="30" />
                    </td>
                    <td>
                        <img src="" width="100" height="100" />
                    </td>
                </tr>
            </table>
    </tr>
    <tr>
        <td>
            <table width=100%>
                <tr>
                    <td style="color: blue; background-color: yellow;">some text here</td>
                    <td style="color: white; background-color: blue;">next goes here</td>
                </tr>
            </table>
    </tr>
</table>

No change required for the CSS code.

The output will be as follows-

Answer 3

As already said, play with %s, here is an example.

<div id="main">
    <table>
        <tr>
            <td><img src="" width="100%" height="100%" /></td>
            <td>
                <img src="" width="100%" height="30%" />
                <img src="" width="100%" height="30%" />
                <img src="" width="100%" height="30%" />
            </td>
            <td><img src="" width="100" height="100" /></td>
        </tr>
    </table>
</div>

http://jsfiddle.net/pUnsA/2/