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