Solved

CSS table height

Posted on 2010-11-29
11
671 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 7

Author Comment

by:gudii9
Comment Utility
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
Comment Utility
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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 8

Expert Comment

by:Zado
Comment Utility
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
Comment Utility
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
Comment Utility
>>>"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
Comment Utility
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
Comment Utility
Please grant the points and close the question, thanks :-)
0
 
LVL 8

Expert Comment

by:Zado
Comment Utility
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

728 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now