title: Cell width in HTML table with merged cells
body: <p>I am sorry if this turns out to be a repeated question. I have a Javascript function which creates an HTML table showing information that depends on certain parameters. The table is actually quite large, but the problem I'm having with it is easier to understand (and remains completely unaltered) if I cut the table down to the relevant bit:</p>
  
  <pre><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td style="text-align:right"&gt;Some text&lt;/td&gt;
      &lt;td&gt;&lt;img src="......."&gt;&lt;/td&gt;
    &lt;/tr&gt;&lt;tr&gt;
      &lt;td colspan="2"&gt;Another table (nested)&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The problem arises when the sum of the widths of whatever goes in the first row of the table is smaller than the width of the nested table in the second row. In this case it seems that the "excess width" gets equally (or proportionally?) distributed between the two cells of the first row. For purely aesthetic reasons (vertical alignment between image and nested table), however, I want the entire "excess width" to get added to the left-hand cell of the first row. I can't give any particular width to the right-hand cell and use "table-layout:fixed" (which BTW doesn't seem to work correctly in my browser, but that's a separate issue), because the image may have different widths. The cells of the first row don't have any padding, so the image cell should theoretically remain "tight" around the image (which it doesn't), and the right-aligned text of the first cell should touch the image.</p>
  
  <p>I have done quite a lot of experimentation, but with my browser (Chrome) at least I just don't manage to prevent the right-hand cell from getting wider than the image....</p>
  
  <p>EDIT: Thanks for the jsfiddle example. But with this method the table will occupy all the available width, while I'd prefer its width to adjust to the content....</p>