Can't change table cell width

Question

I have a table that contains another small table in a cell:

<table id="big" style='width: 100%'>
 <tr>
  ..
  <td>..</td>
  ..
 </tr>
 <tr>
  ..
  <td style='width: 75px'>
    <table style='width: 100%'>
     <tr>
      <td style='width: 33%'><select></select></td>
      <td style='width: 33%'><select></select></td>
      <td style='width: 33%'><select></select></td>
     </tr>
    </table>
  </td>
  ..
 </tr>
</table>

As you can see, I have a small table which should take the whole outer cell. This table should be divided into 1x3 cells, each containing a select combo box.

Now the inner table always takes too big width than specified, corrupting the outer table GUI.

As you can see, I have tried to limit the outer cell width in pixels, without any success.

Answer 1

You need to specify fixed table layout to respect column width even if content needs more space:

table {
    table-layout: fixed;
}