ansaurus

Question

How can I fix a table row height in a 100% height table with a DOCTYPE specified using CSS?

Answer 1

A:

I try to use % as less as possible because padding, borders and margins are added to the 100% width if any, unless you use browsers from the stone-age.. I use to just tile a background image to fake whatever I want to have 100% height on a parent element or the body.

olemarius 2009-02-02 19:09:23

Answer 2

A:

first I would recommend setting the height at the Row level, not the Cell level. And secondly if you set the height of the second row to 100% IE will have it fill the rest of the available space in the table. The following should work:

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

Using the percent based heights though is probably not your best choice, but without knowing and understanding what you are trying to accomplish thats the best advice i can give you

2009-02-02 21:49:23

I see the same problem here as with cletus' answer. The top cell is fixed and the bottom one expands with the window, but the table is 100px taller than the browser window. Essentially, the bottom row is 100% of the window height, not just the remainder of the height after the top row. (IE7)

Baffled by ASP.NET 2009-02-03 09:08:50

Answer 3

A:

Well the solution I posted to your problem, which had a (necessary) div wrapped around your table, works perfectly with that DOCTYPE and a couple of others I tried so I'm not sure what the problem is.

Are you simply choosing to ignore it because it has a div in it? Or did you not read it or try it? What is the problem with divs?

cletus 2009-02-02 21:52:43

Hi. I did try your example. Perhaps I missed something (as I am under a lot of pressure to get some software out I am testing things pretty quickly.) However, I found that the bottom row was 100% of the window height, rather than just the remainder of the window. What did I miss?

Baffled by ASP.NET 2009-02-03 09:06:59

...there's no problem with divs. I am using them for layout.

Baffled by ASP.NET 2009-02-03 09:21:34

Answer 4

+2 A:

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.

mercator 2009-02-02 23:15:19

Answer 5

A:

I have the same problem 2. In IE8 it works fine -lowest tr with 100% height makes the table raw fill the "empty" space left in the table. IE7 makes problem with this solution: the last table row gets height of 100% as screen size instead of just "fill" the empty space of the table.

anyone has solution for this problem?

2009-05-20 13:38:13

ansaurus

tags:

views:

answers:

How can I fix a table row height in a 100% height table with a DOCTYPE specified using CSS?

related questions