• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 717
  • Last Modified:

CSS table height

Hi,

I ran following example
<html>
<head>
<style type="text/css">
table,td,th
{
border:1px solid black;
}
table
{
width:100%;
}
th
{
height:100%;
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>

Open in new window


i gave height 100% but still table did not occupy entire page height. why it is so. please advise. thanks in advance
0
gudii9
Asked:
gudii9
  • 5
  • 2
  • 2
  • +2
4 Solutions
 
qwerty021600Commented:
to make height: 100% to work, u should give some height to its parent element.
0
 
lexlythiusCommented:
You just have a bug, you're setting width instead of height, i.e.,
body {
	height: 100%;
}

Open in new window

instead of
height:100%;

Open in new window

0
 
lexlythiusCommented:
For some buggy old browsers, you might have to set BODY element's height as well, such as:
body {
	height: 800px;
}

Open in new window

0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
gudii9Author Commented:
does

body {
      height: 800px;
}

means height 100%.
>>>>to make height: 100% to work, u should give some height to its parent element.

which is parent here is it head tag is parent here?


i was also not clear on this comment
>>>>You just have a bug, you're setting width instead of height, i.e.,

 body {
      height: 100%;
}

I see i am saying height only as 100% like
body {
      height: 100%;
}
how that is different from
 height: 100%;


please advise
0
 
ZadoCommented:
body { height: 800px; }

Open in new window

is not the same as height: 100%; but 100% is the same as 800px in this case:
<body style="height:800px">
  <div style="height:100%">
    <!-- your content here -->
  </div>
</body>

Open in new window

<body> is the parent element for <div> here. top parent element is always <body>

Read this to understand difference:
http://en.wikibooks.org/wiki/HyperText_Markup_Language/Head_and_Body

"to make height: 100% to work, u should give some height to its parent element. "
so there's no need to set body height:100%, body is the top parent element here, to make it properly, you should use code provided above (with body and div)
0
 
ZadoCommented:
Explanation (and correction) of my previous answer:

"top parent element is always <body>", but 'parent element' could be different:
<body>
<div>
  <p>
    <span>
      text
    </span>
  </p>
</div>
</body>

Open in new window


parent element for <span> is <p>
parent element for <p> is <div>
parent element for <div> is <body>

Read this to understand difference between body and head elements:
http://en.wikibooks.org/wiki/HyperText_Markup_Language/Head_and_Body
0
 
scrathcyboyCommented:
Perhaps I can clear things up by stating that TABLES DO NOT TAKE PERCENT HEIGHTS.

You need to specify the height of a table in ACTUAL PIXELS.  For a table 100% height does NOT mean anything.  Tables are designed to expand to fill the contents of data going into them.  If you could set the height to 100% of some parent element, you would have a lot of white space, it would look BAD!!!

If you want 100% height, you use DIVs, not tables.  Tables can be forced to be higher by specifying BODY height and an enclosing DIV height, but an empty table (or one with little data) will simply NOT SPREAD out vertically the way DIVs do.

USE DIV for 100% height.
0
 
gudii9Author Commented:
>>>"top parent element is always <body>", but 'parent element' could be different:

here
>>>but 'parent element' could be different:

parent element means immediate top element could be different right.


>>>For a table 100% height does NOT mean anything.  Tables are designed to expand to fill the contents of data going into them

i have not understood above statements. please advise

0
 
ZadoCommented:
don't worry about 'top-parent' element, remember the parent element is always one tag up, example copied from my previous post:
<body>
<div>
  <p>
    <span>
      text
    </span>
  </p>
</div>
</body>

Open in new window

parent element for <span> is <p>
parent element for <p> is <div>
parent element for <div> is <body>
0
 
ZadoCommented:
Please grant the points and close the question, thanks :-)
0
 
ZadoCommented:
To be clear here: I'm not asking for grant the points to me, but generally.
If you have a problem with any suggestion from experts or nothing works with your expectation, please let us know, so we will continue work on solution for you, thanks.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 5
  • 2
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now