Question

I have a table something like this:

<table>
    <tr>
        <td id='col1' style='width:120px;'>
            Content here...
        </td>
        <td id='col2' style='width:30px;'>
            Content here...
        </td>
        <td id='col3' style='width:35px;'>
            Content here...
        </td>
    </tr>
</table>

Now, I want col1 to be fixed at a width of 120px. However col2 and col3 should have a dynamic width of the remaining table space. In relation to each other 30% and 35% respectively. (That is if col2 is 300px then col3 should be 320px.)

Answer 1

Have you tried using table-layout:fixed? Not 100% on this but here is a quick mock that seems to work: http://jsfiddle.net/pm6pt/