html - 嵌套的 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

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

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

谢谢。萨杰什

Answer 1

根据 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 .