html - 嵌套的HTML表样式

我面临一个问题。

我的粗略HTML模式是

<tr>
    <td></td>
    <td>
        <a>
            <div class="navbar-link">{{key}}</div>
        </a>
    </td>
    <td>
        <table>
            <tr>
                <td align="center" valign="middle">{{val1.componentname}}</td>
                <td style="border: 1px solid #ddd;"></td>
                <td></td>
                <td></td>
                <td></td>
                <td align="center" valign="middle"></td>
                <td>{{data[temp][0].value[key][0].buildDate}}</td>
            </tr>
        </table>
    </td>
</tr>

我想扩展此表以适合父表的其余列。

P1|P2|P3             |P4|P5|P6 ---Parent table columns
C1|C2|C3|C4|C5|C6

现在我必须在P4，P5，P6下安装C4，C5，C6。
但是C3，C4，C5，C6在P3下创建的表下

如何使用CSS样式实现此目的。

谢谢。
萨吉什

最佳答案

根据评论中发布的fiddle，您可以通过将colspan属性添加到内部表的父级（<td>）来实现此目的，该属性的值为4（即，它跨越的列数），如下所示：

<table>
    <tr>
        <td >
            P1
        </td>
        <td >
            P2
        </td>
        <td >
            P3
        </td>
        <td >
            P4
        </td>
    </tr>
    <tr>
        <td style="height: 100%; min-height: 100%" colspan="4"> <!-- add colspan attribute here -->
            <table style="height: 100%; min-height: 100%">
                <tr>
                    <td>foo1</td>
                    <td>foo2</td>
                    <td>foo3</td>
                    <td>foo4</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

这是updated fiddle。