title: CSS Cell Height
body: <p>I'm having a problem with the following html/css:</p>
  
  <p><a href="http://jsfiddle.net/QYVPb/" rel="nofollow">http://jsfiddle.net/QYVPb/</a></p>
  
  <pre><code>&lt;table cellpadding="0" cellspacing="0" style="background:#FAFAFA; border:1px solid black"&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td style="height:100%; padding:5px"&gt;
          &lt;table cellpadding="0" cellspacing="0" style="table-layout:fixed; height:100%"&gt;
            &lt;tbody&gt;
              &lt;tr&gt;
                &lt;td style="padding:10px; font-weight: 700; text-align: center; background: #E0E0E0"&gt;Some Text&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/td&gt;
        &lt;td style="height:100px; padding:10px"&gt;This cell controls the height&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The doctype is HTML 5.</p>
  
  <p>The html renders the way I'd like to in Firefox (9.0 beta).</p>
  
  <p>In IE, Opera, Chrome &amp; Safari, the background of the "Some Text" cell does not fill the containing cell.</p>
  
  <p>The structure of the html is fairly inflexible - this html is a simplified structure of a much larger application.</p>
  
  <p>I'm hoping for some simple CSS to fix the problem.</p>