title: HTML/CSS Table with a variable row height
body: <p>I have a table like this:</p>
  
  <pre><code> ---------- ----------
  |          |          |
  |  header  |  header  |
  |          |          |
   ---------- ----------
  |          |          |
  |  ......  |  ......  |
  |          |          |
   ---------- ----------
  
  
  
  
  
  ---- bottom of parent ----
  </code></pre>
  
  <p>I want the height of the <code>&lt;tr&gt;</code> to have a maximum value, and I want height of the <code>&lt;table&gt;</code> to have a maximum value, so the height of the <code>&lt;tr&gt;</code> should be able to shrink so that I can get this result:</p>
  
  <pre><code> ---------- ----------
  |  header  |  header  |
   ---------- ----------
  |  ......  |  ......  |
   ---------- ----------
  |  ......  |  ......  |
   ---------- ----------
  |  ......  |  ......  |
   ---------- ----------
  |  ......  |  ......  |
   ---------- ----------
  |  ......  |  ......  |
   ---------- ----------
  |  ......  |  ......  |
   ---------- ----------
  |  ......  |  ......  |
   ---------- ----------
  ---- bottom of parent ----
  </code></pre>
  
  <p>However, I also don't want to end up with a result like this:</p>
  
  <pre><code> ---------- ----------
  |          |          |
  |          |          |
  |          |          |
  |          |          |
  |          |          |
  |  header  |  header  |
  |          |          |
  |          |          |
  |          |          |
  |          |          |
  |          |          |
   ---------- ----------
  |          |          |
  |          |          |
  |          |          |
  |          |          |
  |          |          |
  |  ......  |  ......  |
  |          |          |
  |          |          |
  |          |          |
  |          |          |
  |          |          |
   ---------- ----------
  ---- bottom of parent ----
  </code></pre>
  
  <p>Which is what I'm getting with my code.</p>
  
  <p>I tried playing around with <code>min-height</code>, <code>max-height</code>, <code>height</code>, etc. but there does't seem to be a solution so far.</p>
  
  <pre><code>&lt;style&gt;
    table { height: 400px }
    tr    { /* don't know what to put here */ }
  &lt;/style&gt;
  
  &lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;header&lt;/th&gt;&lt;th&gt;header&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;...&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I know I probably can solve this simply by adding a wrapper and setting a <code>max-height</code> of 100% to the table, but the code I'm working with is generating tables using some script and I can't add a <code>&lt;div&gt;</code> at my heart's content.</p>
  
  <p>Also, I have to specify that I have a maximum amount of 20 rows possible (which is often used up entirely and paginated since there's a lot of data), and I need to have the height of the table to be a specific size when there are 20 rows used, but in some cases, less than 20 rows are needed, and when this happens, the height of the rows become stretched. It becomes absurdly stretched when there's only 1 row.</p>
  
  <p>Any ideas?</p>