让table铺满整个td

将table标签嵌套到另一个table中是非常常见的使用方式，但是有很多棘手的问题，让table铺满整个td也算是其中一个很小的地方吧！

最近使用的将table嵌套到一个td中的大概方式如下：

<table border="2px">
<tr >
<td>
<table border="1px">
<tr>
<td>
12
</td>
<td>
12
</td>
</tr>
<tr>
<td>
12
</td>
<td>
12
</td>
</tr>
</table>
</td>
<td colspan="3">
<table border="1px">
<tr>
<td>
321
</td>
<td>
321
</td>
<td>
321
</td>
</tr>
<tr>
<td>
321
</td>
<td>
321
</td>
<td>
321
</td>
</tr>
<tr>
<td>
321
</td>
<td>
321
</td>
<td>
321
</td>
</tr>
<tr>
<td>
321
</td>
<td>
321
</td>
<td>
321
</td>
</tr>
<tr>
<td>
321
</td>
<td>
321
</td>
<td>
321
</td>
</tr>
<tr>
<td>
321
</td>
<td>
321
</td>
<td>
321
</td>
</tr>

</table>

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

运行结果：

<table border="2px">
<tr >
<td  height="100%">
<table  width="100%" height="100%" border="1px">
<tr>
<td>
12
</td>
<td>
12
</td>
</tr>
<tr>
<td>
12
</td>
<td>
12
</td>
</tr>
</table>
</td>
<td colspan="3">
<table border="1px">
<tr>
<td>
321
</td>
<td>
321
</td>
<td>
321
</td>
</tr>
<tr>
<td>
321
</td>
<td>
321
</td>
<td>
321
</td>
</tr>
<tr>
<td>
321
</td>
<td>
321
</td>
<td>
321
</td>
</tr>
<tr>
<td>
321
</td>
<td>
321
</td>
<td>
321
</td>
</tr>
<tr>
<td>
321
</td>
<td>
321
</td>
<td>
321
</td>
</tr>
<tr>
<td>
321
</td>
<td>
321
</td>
<td>
321
</td>
</tr>

</table>

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

应为html的样式是使用继承的方式，当父标签没有设置值得时候，子标签也没有值。如果想让子标签的值是相对的，父标签一定要设置值。