HTML Tables: fixed and dynamic widths

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

I assume that there is a fourth column somewhere to take up the remaining space? Regardless, you can adapt the following if not...

<table width="800"> <!-- or <table width="50%"> or <table style="width:800px"> etc -->
 <colgroup>
   <col width="120" />
   <col width="30%" />
   <col width="35%" />
   <col />
 </colgroup>
  <tbody>
    <tr> 
      <td>Col 1</td>
      <td>Col 2</td>
      <td>Col 3</td>
      <td>Col 4</td>
    </tr>
  </tbody>
</table>

The first column is fixed at 120 pixels; the second and third columns are 30% and 35% respectively, with any remaning space being allocated to the fourth dynamically sized column.

Answer 2

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/