将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的样式是使用继承的方式,当父标签没有设置值得时候,子标签也没有值。如果想让子标签的值是相对的,父标签一定要设置值。