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，P5，P6下安装C4，C5，C6。但C3，C4，C5，C6位于P3

下创建的表格下

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

感谢。 Sajesh

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 。

嵌套的HTML表格样式

1 个答案: