ansaurus

Question

Answer 1

+4 A:

Try to leave table and use CSS. This is the first link on google (searching: css page layout) http://www.maxdesign.com.au/presentation/page_layouts/

You will spend more time at beginning, but then you will love CSS.

Regards, Lorenzo.

lg 2009-07-13 10:01:35

What if he was using this for tabular data? Why assume he's not and give him an answer he's not looking for?

jonwd7 2009-07-13 10:18:33

I'm not using tabular data, using table just for the layout. I'll take a peek to the link, thanks!

ssg 2009-07-13 10:39:55

Glad to see you've updated your post indicating this. :) In that case, definitely stay away from using tables for layout. The link above is a good start.

jonwd7 2009-07-13 10:55:31

Answer 2

+3 A:

I've tested the following in Firefox and Safari and it works although it's perhaps not the nicest solution! What you'll see is the 20 height on row1 and row3 is still applied and the 100% makes up the rest. If you leave off the padding and margin from the body you'll get scrolling.

<html>
<head>
<style>
html,body { height:100%; padding:0; margin:0; }
</style>
</head>
<body>
<table cellpadding=0 cellspacing=0 style="height:100%;">
  <tr height="20" style="background-color:grey;">
    <td>row 1</td>
  </tr>
  <tr>
    <td>row 2</td>
  </tr>
  <tr height="20" style="background-color:grey;">
    <td>row 3</td>
  </tr>
</table>
</body>
</html>

Ian 2009-07-13 10:02:18

I don't think that answers his question. Doesn't he want the middle row to fill the page?

James 2009-07-13 10:05:37

This should make the middle row fill the page, as the table has a fixed height of 100%, and top+bottom have fixed 20px each. Leaving the rest of the height to the middle row.

peirix 2009-07-13 10:08:58

I did not have to set anything on `html, body` in my example, and there is no scrolling. So I'm not sure what you are talking about there exactly.Also, he wanted 10px each, 20px total. :)

jonwd7 2009-07-13 10:15:39

Interesting this works as I expected. I'll see what I'm doing wrong with my own implementation.

ssg 2009-07-13 10:51:27

I accepted this one due to number of votes although there were more than one valid answer. I also pick lg's CSS recommendation as the second best answer. Thanks.

ssg 2009-07-29 11:58:34

Answer 3

+1 A:

Does this not work?

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>untitled</title>
    <!-- Date: 2009-07-13 -->
    <style type="text/css" media="screen">
     table {height: 100%; width: 100%;}
     td {border: 1px solid #000;}
    </style> 
</head>
<body>
<table>
    <tr height="10"><td>Data</td></tr>
    <tr height="100%"><td>Data</td></tr>
    <tr height="10"><td>Data</td></tr>
</table>
</body>
</html>

It does for me.

jonwd7 2009-07-13 10:03:33

Yes that seems to work, I'm trying to understand why :)

ssg 2009-07-13 10:49:48

Answer 4

+2 A:

The "height: 100%" style will only work on elements that are inside an element that has the height property explicitly set. In your case, the table is likely to be inside the body tag and the body tag doesn't have a height set.

Sohnee 2009-07-13 10:04:13

Thanks for explaining the root cause behind the behavior. I'm still looking for a solution though.

ssg 2009-07-13 10:41:28

Answer 5

A:

Have the same here - the simple examples above work, while my own page does not "stretch" the needed <tr> element.

What I found so far is that excluding the DOCTYPE (thus putting the browser into quirks rendering mode - even for FireFox!) makes my page behave like the simple examples, yet adding a DOCTYPE to these examples stops them from working.

I guess this is not really an answer yet, but it shows the direction in which to look further for the proper solution. Hopefully there is a way to achieve this "stretching" behaviour without the quirks mode.

EDIT: This answer worked for me. The table is wrapped into an absolutely positioned full-screen div. I guess what it does is the browser first calculates the div's dimensions, and then it knows how the table (and the tr inside it) should be sized. Works with DOCTYPE included, relieving, since I don't want to use the quirks rendering mode.

NPC 2010-06-08 16:09:34

ansaurus

tags:

views:

answers:

Fit <TD> height to page

related questions