title: Table row height behavior in IE vs Firefox/Chrome/Safari
body: <p>Consider the following simple html page markup:</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 xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;style type="text/css"&gt;
          body, html
          {
              height: 100%;
              width: 100%;
          }
          td
          {
              border:1px solid red;
          }
          table
          {
              border-collapse: collapse;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;table cellpadding="0" cellspacing="0" style="width: 100%; height: 100%;"&gt;
          &lt;tr&gt;
              &lt;td style="width: 100%; height: 100%;"&gt;
                  cell 1
              &lt;/td&gt;
              &lt;td style="width: 100%; height: 100%;"&gt;
                  cell 2
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
  
              &lt;td style="width: 100%; height: 100%;"&gt;
                  cell 3
              &lt;/td&gt;
              &lt;td style="width: 100%; height: 100%;"&gt;
                  cell 4
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>In IE 7/8/Opera, the 100% height of the  tags is interpreted as 100% of the page, where as in Firefox/Chrome/Safari, the entire table takes up the entire height of the page, and instead, the table rows fill in the remaining space that they are given.  I need IE to behave the same way as non-IE browsers. Is there a way to get this same behavior in IE using the XHTML transitional doctype?  I have been working on a crazy javascript routine to mimic the behavior but I'm wondering if there is a simpler way like a CSS hack or something.  Thanks!</p>