嵌套的HTML表樣式

Question

我面臨一個問題。

我的粗略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樣式實現此目的。

謝謝。 Sajesh

Answer 1

按照評論中的小提琴 ，您可以通過將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>

這是更新的小提琴 。