table not going to 100% height

Question

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:info@info.net" style="color: #6197dc;">info@info.net</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:info@info.net" style="color: #6197dc;">info@info.net</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:info@info.net" style="color: #6197dc;">info@info.net</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:info@info.net" style="color: #6197dc;">info@info.net</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:info@info.net" style="color: #6197dc;">info@info.net</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:info@info.net" style="color: #6197dc;">info@info.net</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="info@info.net">info@info.net</a>
                                        </p>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

Here is a jsfiddle:JSFIDDLE

Two side-by-side divs would be better than using a table, E.g. [Two divs side by side - Fluid display](http://stackoverflow.com/questions/17217766/two-divs-side-by-side-fluid-display) — Alex K., Apr 21 '15 at 11:24

Thargor · Answer 1 · 2015-04-21T11:38:29.050

2

Put

display: inline-table;

on the td holding the second table.

See: http://jsfiddle.net/Lhx14tvk/1/

edited Apr 21 '15 at 11:38

answered Apr 21 '15 at 11:25

Thargor

709
5
19

score 0 · Answer 2 · answered Apr 21 '15 at 11:22

0

Need to set margin on body to 0.

body { margin: 0; }

http://jsfiddle.net/4r767zm1/1/

answered Apr 21 '15 at 11:22

garryp

5,508
1
29
41

score 0 · Answer 3 · answered Apr 21 '15 at 11:26

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/

score 0 · Answer 4 · answered Apr 21 '15 at 11:26

0

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 %.

answered Apr 21 '15 at 11:26

Niks

95
1
5
11

Actually, any non-zero value would have given you the same result. – Marc Audet Apr 21 '15 at 12:23
Ok. Well I just realized that in IE I still have the same problem – Niks Apr 21 '15 at 13:00

score 0 · Answer 5 · answered Apr 21 '15 at 11:31

0

Add CSS:

.join_table_wrapper {
   display:inline-block;
}

updated fiddle http://jsfiddle.net/4r767zm1/6/

answered Apr 21 '15 at 11:31

Tanya Sinha

604
6
15

It works fine in chrome and safari, but in IE nothing has changed – Niks Apr 21 '15 at 13:00

score 0 · Answer 6 · answered Apr 21 '15 at 11:48

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:info@info.net" style="color: #6197dc;">info@info.net</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:info@info.net" style="color: #6197dc;">info@info.net</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:info@info.net" style="color: #6197dc;">info@info.net</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:info@info.net" style="color: #6197dc;">info@info.net</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:info@info.net" style="color: #6197dc;">info@info.net</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:info@info.net" style="color: #6197dc;">info@info.net</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="info@info.net">info@info.net</a>
                                        </p>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>

            </td>
        </tr>
    </tbody>
</table>

Fiddle

Marc Audet · Answer 7 · 2015-04-21T13:25:38.410

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/

I've added `style="height: 100%"` to the table but it didn't change in IE — Niks, Apr 21 '15 at 13:02
@Niks I found a work around for IE (and all the other cases) and updated my answer. Please review when you have time. — Marc Audet, Apr 21 '15 at 13:26

score -1 · Answer 8 · answered Apr 21 '15 at 11:30

-1

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

answered Apr 21 '15 at 11:30

Muhammad Waqas

64
1
10

table not going to 100% height

8 Answers8