title: IE css - last table row to expand to fill remaining height
body: <p>Given HTML like the following, how can I get the last row to take up the remaining height, and have the n-1 first rows to take up just as much height as they need?</p>
  
  <p>This seems to work as is in Chrome, but not in Firefox2 or IE6/7/8.</p>
  
  <pre><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td rowspan="5"&gt;&lt;div style="border: 1px solid #cdcdcd; width: 100px; height: 300px;"/&gt;&lt;/td&gt;
      &lt;td/&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;one&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;two&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;three&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;full&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>So, the idea is that the last row, with "full" in it, should be really tall, and the other rows, "one", "two" and "three" should be as small as possible.</p>
  
  <p>I've tried stuff like putting exact heights on the rows, say "&lt;tr style="height:20px;"&gt; and I've tried 100% height on the last row, no luck so far!</p>
  
  <p><strong>Update:</strong></p>
  
  <p>This layout is going to be used for varying types of content, and the intention is for the table to size itself to the content.  Sometimes the div will be tall, then its height determines the table's height, but othertimes the div is short, then the rows (one, two, three) determine the table's height.</p>