Html – How to fix a table row height in a 100% height table with a DOCTYPE specified using CSS

asp.netcsshtml

This is a follow up question to that at Can I create a HTML table width a percentage height but pixel accurate row heights?.

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.

I have used the following code:

<html>
  <body>
    <table style="border-collapse:collapse;height:100%;width:100%;">
      <tr>
        <td style="border:solid 1px black;height:100px">1</td>
        <td style="border:solid 1px black">2</td>
      </tr>
      <tr>
        <td style="border:solid 1px black">3</td>
        <td style="border:solid 1px black">4</td>
      </tr>
    </table>
  </body>
</html>

This works as I require it to.

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.

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.

If you want to see the problem, try the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="height:100%">
  <body style="height:100%">
    <table style="border-collapse:collapse;height:100%;width:100%;">
      <tr>
        <td style="border:solid 1px black;height:100px">1</td>
        <td style="border:solid 1px black">2</td>
      </tr>
      <tr>
        <td style="border:solid 1px black">3</td>
        <td style="border:solid 1px black">4</td>
      </tr>
    </table>
  </body>
</html>

Does anyone know the answer?

Best Solution

There's an easy way to fix this, especially if the page just contains this table, and you just want it to work. I'm not sure if ASP.NET will let you though: Add a comment in front of the doctype. E.g.

<!-- Here for IE6/7 -->
<!DOCTYPE html (etc.)>
... The HTML that works in quirks mode ...

This will make IE6 and IE7 trigger quirks mode, meaning those earlier answers will actually work. But it is perfectly valid use of the DOCTYPE and will trigger standards mode in all other browsers. IE8 (RC1 anyway) also uses quirks mode for this, though it does also render correctly in standards mode.

Of course, keeping IE6 and 7 in quirks mode means they'll be in quirks mode for all the other stuff too, so if you're going to use a lot of other CSS, you might regret it.