title: How to force a TD to be a certain height with CSS?
body: <p>Although <a href="https://stackoverflow.com/questions/2124630/forcing-a-certain-width-height-with-overflow-in-a-td">some</a> <a href="https://stackoverflow.com/questions/3968561/overflow-auto-in-table-td-that-has-no-certain-height">questions</a> <a href="https://stackoverflow.com/questions/5091179/css-how-to-make-td-a-fixed-height">similar</a> to this one have been asked before, this one is a little different.</p>
  
  <p>I have a table that looks a little something like this:</p>
  
  <pre><code>&lt;table&gt;
   &lt;tr&gt;
    &lt;td style="height: 100px;"&gt;
     &lt;img src="..." style="height: 100px;" /&gt;
     &lt;img src="..." style="height: 100px; position: relative; top: -100px;" /&gt;
    &lt;/td&gt;
   &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>This will overlay the second image on the first one. <strong>However,</strong> the <code>td</code> insists on being <code>200px</code> tall <em>even though there is only <code>100px</code> of content</em>. Setting the <code>td</code>'s height does nothing, which seems consistent with the answers to the other questions.</p>
  
  <p>However, I do not have the option of embedding the contents in a <code>DIV</code> and setting the height to <code>100px</code> because the <code>td</code> will <strong>still</strong> insist on being <code>200px</code> tall.</p>
  
  <p>How can I tell the <code>td</code> to <em>just be <code>100px</code> tall?</em></p>
  
  <hr>
  
  <p><strong>Edit:</strong> Oh, and using absolute positioning is out of the question too because a lot of DOM manipulation goes on in the page and stuff gets moved around - whereas the absolutely positioned stuff does not.</p>
  
  <hr>
  
  <p><strong>Edit:</strong> <a href="http://jsfiddle.net" rel="nofollow noreferrer">jsFiddle</a> example <a href="http://jsfiddle.net/S3s4G/" rel="nofollow noreferrer">can be found here</a>.</p>