title: How can I fix a table row height in a 100% height table with a DOCTYPE specified using CSS?
body: <p>This is a follow up question to that at <a href="https://stackoverflow.com/questions/495194/can-i-create-a-html-table-width-a-percentage-height-but-pixel-accurate-row-height">Can I create a HTML table width a percentage height but pixel accurate row heights?</a>.</p>
  
  <p>I have a table in a HTML page that will be used for tabular data (so I don't want an answer based around divs). This needs to be rendered at 100% height with the top row having a fixed size and the second row stretching to fit the rest of the available area.</p>
  
  <p>I have used the following code:</p>
  
  <pre><code>&lt;html&gt;
    &lt;body&gt;
      &lt;table style="border-collapse:collapse;height:100%;width:100%;"&gt;
        &lt;tr&gt;
          &lt;td style="border:solid 1px black;height:100px"&gt;1&lt;/td&gt;
          &lt;td style="border:solid 1px black"&gt;2&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td style="border:solid 1px black"&gt;3&lt;/td&gt;
          &lt;td style="border:solid 1px black"&gt;4&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This works as I require it to.</p>
  
  <p>The problem is, when I put this in an ASP.NET page created in Visual Studio, it adds a DOCTYPE element. After adding the DOCTYPE (and setting the CSS for the html and body tags to include height:100%), the top row of the table is much bigger than the bottom row and neither row is of a fixed height.</p>
  
  <p>I know I should use a DOCTYPE and not rely on "quirks mode" in Internet Explorer to ensure future compatibility. However, I have tried all the DOCTYPEs I can find to try and change this behaviour to what I need but can't get it to work. It does work in Firefox but the job is for an Intranet where the users use IE7.</p>
  
  <p>If you want to see the problem, try the following:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html style="height:100%"&gt;
    &lt;body style="height:100%"&gt;
      &lt;table style="border-collapse:collapse;height:100%;width:100%;"&gt;
        &lt;tr&gt;
          &lt;td style="border:solid 1px black;height:100px"&gt;1&lt;/td&gt;
          &lt;td style="border:solid 1px black"&gt;2&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td style="border:solid 1px black"&gt;3&lt;/td&gt;
          &lt;td style="border:solid 1px black"&gt;4&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Does anyone know the answer?</p>