Solved

CSS table height

Posted on 2010-11-29
11
696 Views
Last Modified: 2012-05-10
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
Comment
Question by:gudii9
  • 5
  • 2
  • 2
  • +2
11 Comments
 
LVL 13

Accepted Solution

by:
qwerty021600 earned 50 total points
ID: 34236459
to make height: 100% to work, u should give some height to its parent element.
0
 
LVL 7

Assisted Solution

by:lexlythius
lexlythius earned 150 total points
ID: 34236553
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
 
LVL 7

Assisted Solution

by:lexlythius
lexlythius earned 150 total points
ID: 34236560
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: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 7

Author Comment

by:gudii9
ID: 34240226
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
 
LVL 8

Expert Comment

by:Zado
ID: 34240855
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
 
LVL 8

Expert Comment

by:Zado
ID: 34240924
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
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 34245228
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
 
LVL 7

Author Comment

by:gudii9
ID: 34261254
>>>"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
 
LVL 8

Assisted Solution

by:Zado
Zado earned 300 total points
ID: 34262306
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
 
LVL 8

Expert Comment

by:Zado
ID: 34317448
Please grant the points and close the question, thanks :-)
0
 
LVL 8

Expert Comment

by:Zado
ID: 34384863
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

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question