title: Setting column width to a percentage in Firefox
body: <p>I'm having trouble with a table's behaviour in Firefox. I want a table consisting of two columns in the ratio 3:1. The first column includes 3 images in a second table which should resize to fit into the column.</p>
  
  <p>In Chrome the images resize to fit into the first column, which is correctly set to 75%. They do this whether I specify a max-width or do not give them any size attributes. However, in Firefox, the images do not resize and instead the cell expands to be greater than 75%, meaning that the contents of the second column becomes squashed.</p>
  
  <p>The structure of the code looks like this:</p>
  
  <pre><code>&lt;table border="0" cellpadding="10" cellspacing="10" style="width: 100%;"&gt;
   &lt;tbody&gt;
    &lt;tr&gt;
     &lt;td style="vertical-align:top;width:75%;"&gt;
      &lt;table cellpadding="2" cellspacing="0"&gt;
       &lt;tbody&gt;
        &lt;tr&gt;
         &lt;td&gt;
          &lt;img src="image1.jpg" style="max-width:625px;" /&gt;
         &lt;/td&gt;
         &lt;td rowspan="2"&gt;
          &lt;img src="image2.jpg" style="max-width:240px;" /&gt;
         &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
         &lt;td&gt;
          &lt;img src="image3.jpg" style="max-width:625px;" /&gt;
         &lt;/td&gt;
        &lt;/tr&gt;
       &lt;/tbody&gt;
      &lt;/table&gt;
     &lt;/td&gt;
     &lt;td&gt;
      Second column
     &lt;/td&gt;
    &lt;/tr&gt;
   &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>How can I adapt this code so that it works correctly in Firefox as well as in Chrome? I've read other related questions, but haven't been able to find a solution I can get to work.</p>
  
  <p>P.S. Please no comments on how I shouldn't be using CSS like this. I have my reasons for not using a proper stylesheet while I'm playing around.</p>