Solved

CSS table height

Posted on 2010-11-29
11
687 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
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 
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

The Eight Noble Truths of Backup and Recovery

How can IT departments tackle the challenges of a Big Data world? This white paper provides a roadmap to success and helps companies ensure that all their data is safe and secure, no matter if it resides on-premise with physical or virtual machines or in the cloud.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

770 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