Question

我想在td中实现全长的嵌套行，但我无法实现它。

<td>
    <table class="table table-striped">
        <tr>
            <td colspan="3">I am nested in a table column</td>
            <td  colspan="3">I am also nested in a table column</td>
            </tr>
            <tr>
            <td colspan="3">I am nested in a table column</td>
            <td  colspan="3">I am also nested in a table column</td>
        </tr>
    </table>
</td>

下面是我想要实现的截图：

以下是我最终出现的截图：

你能给我一些建议吗？

Answer 1

<td>
    <table class="table table-striped">
        <tr>
             <td>I am nested in a table column</td>
        </tr>
          <tr>
             <td>I am also nested in a table column</td>
          </tr>
          <tr>
            <td>I am nested in a table column</td>
          </tr>
          <tr>
             <td>I am also nested in a table column</td>
          </tr>
    </table>
</td>

Answer 2

请参考此代码段。您将找到并理解您在寻找的内容：

<table class="table table-striped">
    <thead>
        <tr>
            <td colspan="3">Head1</td>
            <td colspan="3">Head2</td>
            <td colspan="3">Head3</td>
            <td colspan="3">Head4</td>
            <td colspan="3">Head5</td>
        </tr>
    </thead>
    <tr>
        <td colspan="3">I am nested in a table column</td>
        <td colspan="3">I am nested in a table column</td>
        <td colspan="3">I am nested in a table column</td>
        <td colspan="3">I am nested in a table column</td>
        <td colspan="3">I am also nested in a table column</td>
    </tr>
    <tr>
        <td colspan="3"></td>
        <td colspan="3"></td>
        <td colspan="3">I am nested in a table column</td>
        <td colspan="3">I am nested in a table column</td>
        <td colspan="3">I am also nested in a table column</td>
    </tr>

    <tr>
        <td colspan="3"></td>
        <td colspan="3"></td>
        <td colspan="3">I am nested in a table column</td>
        <td colspan="3">I am nested in a table column</td>
        <td colspan="3">I am also nested in a table column</td>
    </tr>

    <tr>
        <td colspan="3">I am nested in a table column</td>
        <td colspan="3">I am nested in a table column</td>
        <td colspan="3">I am nested in a table column</td>
        <td colspan="3">I am nested in a table column</td>
        <td colspan="3">I am also nested in a table column</td>
    </tr>
</table>

PS：这是您完整的<table>。

Answer 3

感谢答案。但正如我在角度js中实现它。所以我最终确实如下：

<tbody>
<tr ng-repeat-start="row in events | orderBy : '-created_at'">
    <td>

    </td>
    <td>000</td>
    <td>0000</td>
    <td>            
        <a ng-show="!row.expanded" ng-click="row.expanded = true;">Expand</a>
        <a ng-show="row.expanded" ng-click="row.expanded = false;">Collapse</a>
    </td>
    <td>111</td>
    <td>111111111</td>
    <td>11</td>
    <td>
        3333
    </td>
</tr>
<tr ng-repeat="property in row.properties" ng-repeat-end="" ng-if="row.expanded">
    <td colspan="3"></td>
    <td>3232</td>
    <td>2323</td>
    <td>3232</td>
    <td colspan="2">2323</td>
</tr>
</tbody>

在td中实现嵌套行

3 个答案: