Reputation: 95
table not going to 100% height
I'm creating a page that has 2 tables inside a table, the problem I'm having is that my one table doesn't go 100%, I've created a jsfiddle for you to see and the one that is the problem is the one that has a pink background. This problem only occurs in Chrome, Safari and IE, but it works just fine in Firefox.
my html
<table class="table company_table_wrapper">
<tbody>
<tr>
<td class="company_table" height="100%">
<table class="table table_unit" style="height:100%">
<tbody>
<tr>
<td colspan="3">
<div class="company_title">
<h2>This is the head of units</h2>
</div>
</td>
</tr>
<tr>
<td>
<div class="unit_heads">
<p>
<span style="color: #6197dc; font-size: 13px; font-weight: bold;">Testing</span>
</p>
<p>
<span style="color: #00316f; font-size: 13px; font-weight: 600;">Person 1</span>
</p>
<p>
<span style="font-size: 13px; font-weight: 300;">Tel number</span>
</p>
<p>
<span style="color: #6197dc; font-size: 13px; font-weight: 300;">
<a href="mailto:[email protected]" style="color: #6197dc;">[email protected]</a>
</span>
</p>
</div>
</td>
<td>
<div class="unit_heads">
<p>
<span style="color: #6197dc; font-size: 13px; font-weight: bold;">Testing 2</span>
</p>
<p>
<span style="color: #00316f; font-size: 13px; font-weight: 600;">Person 2</span>
</p>
<p>
<span style="font-size: 13px; font-weight: 300;">Tel number</span>
</p>
<p>
<span style="color: #6197dc; font-size: 13px; font-weight: 300;">
<a href="mailto:[email protected]" style="color: #6197dc;">[email protected]</a>
</span>
</p>
</div>
</td>
<td>
<div class="unit_heads">
<p>
<span style="color: #6197dc; font-size: 13px; font-weight: bold;">Testing 3</span>
</p>
<p>
<span style="color: #00316f; font-size: 13px; font-weight: 600;">Person 3</span>
</p>
<p>
<span style="font-size: 13px; font-weight: 300;">Tel number</span>
</p>
<p>
<span style="color: #6197dc; font-size: 13px; font-weight: 300;">
<a href="mailto:[email protected]" style="color: #6197dc;">[email protected]</a>
</span>
</p>
</div>
</td>
</tr>
<tr>
<td>
<div class="unit_heads">
<p>
<span style="color: #6197dc; font-size: 13px; font-weight: bold;">Testing 4</span>
</p>
<p>
<span style="color: #00316f; font-size: 13px; font-weight: 600;">Person 4</span>
</p>
<p>
<span style="font-size: 13px; font-weight: 300;">Tel no</span>
</p>
<p>
<span style="color: #6197dc; font-size: 13px; font-weight: 300;">
<a href="mailto:[email protected]" style="color: #6197dc;">[email protected]</a>
</span>
</p>
</div>
</td>
<td>
<div class="unit_heads">
<p>
<span style="color: #6197dc; font-size: 13px; font-weight: bold;">Testing 5</span>
</p>
<p>
<span style="color: #00316f; font-size: 13px; font-weight: 600;">Person 5</span>
</p>
<p>
<span style="font-size: 13px; font-weight: 300;">Tel no</span>
</p>
<p>
<span style="color: #6197dc; font-size: 13px; font-weight: 300;">
<a href="mailto:[email protected]" style="color: #6197dc;">[email protected]</a>
</span>
</p>
</div>
</td>
<td>
<div class="unit_heads">
<p>
<span style="color: #6197dc; font-size: 13px; font-weight: bold;">Testing 6</span>
</p>
<p>
<span style="color: #00316f; font-size: 13px; font-weight: 600;">Person 6</span>
</p>
<p>
<span style="font-size: 13px; font-weight: 300;">Tel no</span>
</p>
<p>
<span style="color: #6197dc; font-size: 13px; font-weight: 300;">
<a href="mailto:[email protected]" style="color: #6197dc;">[email protected]</a>
</span>
</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td class="join_table_wrapper" height="100%">
<table class="table table_join_us" style="height:100%">
<tbody>
<tr>
<td>
<div class="join_us">
<div class="join_us_title">
<h2>Join Us!</h2>
<img src="images/magnify_glass.png">
<div class="clearboth"></div>
</div>
<div class="join_us_content">
<p>Some content goes here</p>
<p>
More content goes here
<a href="[email protected]">[email protected]</a>
</p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Here is a jsfiddle:JSFIDDLE
Upvotes: 2
Views: 378
Answers (8)
Reputation: 46825
There is a cross-browser issue with tables in Chrome (and probably similar webkit browsers) and in IE. (This is due in part to the CSS specification leaving certain details about computing table heights to the discretion of the browser.)
You need to set a height value to the top level table in order for the percentage values of height to compute properly on the nested child tables and table cells.
In Chrome browsers, add the following:
<table class="table company_table_wrapper" height="100%">
or
<table class="table company_table_wrapper" style="height: 100%";>
and this fixes the problem.
See fiddle: http://jsfiddle.net/3hjznx0d/
However, this does not work in IE.
The work around for IE (and this works equally well for Chrome and Firefox) is to set:
<table class="table company_table_wrapper" height="1">
I used a value of "1" but any small value will work.
The reason this works is that for tables, the height value is behaves like a minimum value (this is in the CSS specification), which means the table will expand the table cell heights as needed to display the content and then set the height of the table to contain the table cells.
See CSS specification: http://www.w3.org/TR/CSS21/tables.html#height-layout
By setting a value of "1" (1 pixel in fact), the table tries to set the table cell height to 1px, and because of your content, the table-cell heights compute to a larger value, which in turn sets the table height (computes to a shrink-to-fit value). If you had set it to a larger value, say "400", then the table would take on a height of at least 400px unless you added enough content that computed to a cell height greater than 400px.
See other demo fiddle: http://jsfiddle.net/8azbtoou/
Upvotes: 0
Reputation: 1296
This works for me.
<table class="table company_table_wrapper">
<tbody>
<tr>
<td class="company_table" height="100%">
<table class="table table_unit" style="height:100%">
<tbody>
<tr>
<td colspan="3">
<div class="company_title">
<h2>This is the head of units</h2>
</div>
</td>
</tr>
<tr>
<td>
<div class="unit_heads">
<p>
<span style="color: #6197dc; font-size: 13px; font-weight: bold;">Testing</span>
</p>
<p>
<span style="color: #00316f; font-size: 13px; font-weight: 600;">Person 1</span>
</p>
<p>
<span style="font-size: 13px; font-weight: 300;">Tel number</span>
</p>
<p>
<span style="color: #6197dc; font-size: 13px; font-weight: 300;">
<a href="mailto:[email protected]" style="color: #6197dc;">[email protected]</a>
</span>
</p>
</div>
</td>
<td>
<div class="unit_heads">
<p>
<span style="color: #6197dc; font-size: 13px; font-weight: bold;">Testing 2</span>
</p>
<p>
<span style="color: #00316f; font-size: 13px; font-weight: 600;">Person 2</span>
</p>
<p>
<span style="font-size: 13px; font-weight: 300;">Tel number</span>
</p>
<p>
<span style="color: #6197dc; font-size: 13px; font-weight: 300;">
<a href="mailto:[email protected]" style="color: #6197dc;">[email protected]</a>
</span>
</p>
</div>
</td>
<td>
<div class="unit_heads">
<p>
<span style="color: #6197dc; font-size: 13px; font-weight: bold;">Testing 3</span>
</p>
<p>
<span style="color: #00316f; font-size: 13px; font-weight: 600;">Person 3</span>
</p>
<p>
<span style="font-size: 13px; font-weight: 300;">Tel number</span>
</p>
<p>
<span style="color: #6197dc; font-size: 13px; font-weight: 300;">
<a href="mailto:[email protected]" style="color: #6197dc;">[email protected]</a>
</span>
</p>
</div>
</td>
</tr>
<tr>
<td>
<div class="unit_heads">
<p>
<span style="color: #6197dc; font-size: 13px; font-weight: bold;">Testing 4</span>
</p>
<p>
<span style="color: #00316f; font-size: 13px; font-weight: 600;">Person 4</span>
</p>
<p>
<span style="font-size: 13px; font-weight: 300;">Tel no</span>
</p>
<p>
<span style="color: #6197dc; font-size: 13px; font-weight: 300;">
<a href="mailto:[email protected]" style="color: #6197dc;">[email protected]</a>
</span>
</p>
</div>
</td>
<td>
<div class="unit_heads">
<p>
<span style="color: #6197dc; font-size: 13px; font-weight: bold;">Testing 5</span>
</p>
<p>
<span style="color: #00316f; font-size: 13px; font-weight: 600;">Person 5</span>
</p>
<p>
<span style="font-size: 13px; font-weight: 300;">Tel no</span>
</p>
<p>
<span style="color: #6197dc; font-size: 13px; font-weight: 300;">
<a href="mailto:[email protected]" style="color: #6197dc;">[email protected]</a>
</span>
</p>
</div>
</td>
<td>
<div class="unit_heads">
<p>
<span style="color: #6197dc; font-size: 13px; font-weight: bold;">Testing 6</span>
</p>
<p>
<span style="color: #00316f; font-size: 13px; font-weight: 600;">Person 6</span>
</p>
<p>
<span style="font-size: 13px; font-weight: 300;">Tel no</span>
</p>
<p>
<span style="color: #6197dc; font-size: 13px; font-weight: 300;">
<a href="mailto:[email protected]" style="color: #6197dc;">[email protected]</a>
</span>
</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td class="join_table_wrapper" style="height:1px">
<table class="table table_join_us" style="height:100%">
<tbody>
<tr style="height:1px">
<td>
<div class="join_us" style="height:100%">
<div class="join_us_title">
<h2>Join Us!</h2>
<img src="images/magnify_glass.png">
<div class="clearboth"></div>
</div>
<div class="join_us_content">
<p>Some content goes here</p>
<p>
More content goes here
<a href="[email protected]">[email protected]</a>
</p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Upvotes: 0
Reputation: 729
Put
display: inline-table;
on the td holding the second table.
See: http://jsfiddle.net/Lhx14tvk/1/
Upvotes: 2
Reputation: 634
Add CSS:
.join_table_wrapper {
display:inline-block;
}
updated fiddle http://jsfiddle.net/4r767zm1/6/
Upvotes: 0
Reputation: 64
if u change 100% with 100 it becomes "100px" so u dont need to give height table take height automatically..
if u want space on bottom of page u can give
Upvotes: -1
Reputation: 95
I realised what I did wrong in my <td class="join_table_wrapper" height="100%"> I had 100%. I just needed to change it to 100, without the %.
Upvotes: 0
Reputation: 1200
Use display:inline-block on your second table.
Also pink background comes from your CSS
.company_table_wrapper .table_join_us {
background: none repeat scroll 0 0 pink;
}
Change it according to your needs.
Here is a modified fiddle http://jsfiddle.net/4r767zm1/3/
Upvotes: 0
Reputation: 5776
Need to set margin on body to 0.
body { margin: 0; }
http://jsfiddle.net/4r767zm1/1/
Upvotes: 0
Related Questions
- Getting a table to fill 100% height in a td
- How to make table 100% height in HTML?
- height = 100% doesn't seem to work for table
- table with height 100% doesn't fit parent size
- HTML: td not 100% table height
- Table not fitting to 100% height
- Html table height="100%" not filling parent height
- Table height 100% is not set to parent height
- 100% height on css table
- Table not sitting at 100% height within DIV tags