How do i set the inner table size to the size of the outer column when it is using percentage?

Question

My 'anothertablebody' will increase in size depending on what the user enters, it can increase till it exceed the outer table, i don't want it like this. I want the width to be fixed not by pixels, but according to the outer table. For eg col1 i want it 10% of the outer column, col2 30% of the outer column n col3 60% of the outer column... how can it be done?

It would be good if i can also get what the 100% width in pixel...

<table width='90%'>
<tbody id='todobody'>
    <tr>
        <td valign='top' width='100%'> <--- this is the outer column
            <div class='div1'>
                <table>
                    <tbody id='atablebody'>
                    <tr>
                    <td>col1</td>
                    <td>col2</td>
                    <td>col3</td>                                               
                    </tr>
                    </tbody>
                    <tbody id=anothertablebody'></tbody>
                </table>
            </div>
        </td>
    </tr>
</tbody>
</table>

Answer 1

<table width='90%'>
<tbody id='todobody'>
    <tr>
        <td valign='top' width='100%'> <!-- this is the outer column-->
            <div class='div1' style="width: 100%;">
                <table width="100%">
                    <tbody id='atablebody'>
                    <tr>
                    <td width="10%">col1</td>
                    <td width="30%">col2</td>
                    <td>col3</td>                                               
                    </tr>
                    </tbody>
                    <tbody id=anothertablebody'></tbody>
                </table>
            </div>
        </td>
    </tr>
</tbody>
</table>

When you say width="100%", it means that particular tag should occupy 100% of the width available to it