html - table 不会达到 100% 高度

Question

我正在创建一个在一个表中包含 2 个表的页面，我遇到的问题是我的一个表没有 100%，我创建了一个 jsfiddle 供您查看，而那个是问题是那个有粉红色背景的。 此问题只出现在 Chrome、Safari 和 IE 中，但在 Firefox 中工作正常。

我的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>

这是一个 jsfiddle:JSFIDDLE

Answer 1

放

display: inline-table;

在持有第二张 table 的 td 上。

参见:http://jsfiddle.net/Lhx14tvk/1/