我正在创建一个在桌子中有2个桌子的页面，我遇到的问题是我的一张桌子没有100％，我已经创建了一个jsfiddle for你要看，问题是那个有粉红色背景的人。 此问题仅发生在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
答案 0 :(得分：2)
答案 1 :(得分：0)
答案 2 :(得分：0)
在第二张桌子上使用display:inline-block。
粉红色背景也来自你的CSS
.company_table_wrapper .table_join_us {
background: none repeat scroll 0 0 pink;
}
根据您的需要进行更改。
这是一个修改过的小提琴 http://jsfiddle.net/4r767zm1/3/
答案 3 :(得分：0)
我意识到我在<td class="join_table_wrapper" height="100%">我做错了100％的错误。我只需将它改为100，没有％。
答案 4 :(得分：0)
答案 5 :(得分：0)
这对我有用。
<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>
答案 6 :(得分：0)
Chrome浏览器（可能是类似的webkit浏览器）和IE中存在跨浏览器问题。 （这部分是由于CSS规范将计算表高度的某些细节留给浏览器自行决定。）
您需要将高度值设置为顶级表，以便在嵌套的子表和表格单元格上正确计算高度的百分比值。
在Chrome浏览器中，添加以下内容：
<table class="table company_table_wrapper" height="100%">
或
<table class="table company_table_wrapper" style="height: 100%";>
这解决了这个问题。
请参阅小提琴：http://jsfiddle.net/3hjznx0d/
但是，这在IE中不起作用。
IE的解决方案（这对Chrome和Firefox同样有效） 是设置：
<table class="table company_table_wrapper" height="1">
我使用了＆＃34; 1＆＃34;但任何小的价值都会有效。
这样做的原因是对于表，高度值的行为类似于最小值（这在CSS规范中），这意味着表将根据需要扩展表格单元格高度以显示内容然后设置包含表格单元格的表格高度。
请参阅CSS规范：http://www.w3.org/TR/CSS21/tables.html#height-layout
通过设置＆＃34; 1＆＃34;的值（实际上是1个像素），该表尝试将表格单元格高度设置为1px，并且由于您的内容，表格单元格高度计算为更大的值，而后者又设置表格高度（计算为缩小到 - 适合的价值）。如果你将它设置为一个更大的值，比如说＆＃34; 400＆＃34;，那么除非你添加了足够的内容计算到大于400px的单元格高度，否则表格的高度至少为400px。
请参阅其他演示小提琴：http://jsfiddle.net/8azbtoou/
答案 7 :(得分：-1)
如果你用100改变100％它变成“100px”所以你不需要自动给高度表取高度。 如果你想在页面底部留出空间你可以给出