表格内的表格ng-repeat没有正确显示?

时间:2016-04-19 07:28:22

标签: html angularjs

我有一个2行X 3 Columnus表,在第二行中,我在每个单元格中添加一个表。在这些表中,我使用Angular和ng-repeat来显示数据。我的问题是数据没有正确显示。这是我的代码和结果的屏幕截图。

<tr>
    <td style="font-weight: bold">
        Europe 
    </td>
    <td style="font-weight: bold">
        Europe 
    </td>
    <td style="font-weight: bold">
        Europe 
    </td>
    <td>...</td>
</tr>

<tr>
    <td style="font-weight: bold">
        <table id="table3" class="table table-striped">
            <tr>
                <th>CustomerID</th>
                <th>CustomerUserID</th>
                <th>Environment</th>
                <th>Time Elapsed</th>
                <th>Migrated </th>

                <tr ng-repeat="runEu in runMig24InEurope | filter:searchRunEur">
                    <td>{{ runEu.customerID }}</td>
                    <td>{{ runEu.customerUserID}}</td>
                    <td>{{ runEu.environment}}</td>
                </tr>
        </table>
    </td>

    <td style="font-weight: bold">
        <table id="table4" class="table table-striped">
            <tr>
                <th>CustomerID</th>
                <th>CustomerUserID</th>
                <th>Environment</th>

                <tr ng-repeat="succEu in succMig24InEurope | filter:searchSuccEur">
                    <td>{{ succEu.customerID }}</td>
                    <td>{{ succEu.customerUserID}}</td>
                    <td>{{ succEu.environment}}</td>
                </tr>
        </table>
    </td>

    <td style="font-weight: bold">
        <table id="table5" class="table table-striped">
            <tr>
                <th>CustomerID</th>
                <th>CustomerUserID</th>
                <th>Environment</th>

                <tr ng-repeat="errEu in onErrMig24InEurope | filter:searchErrEur">
                    <td>{{ errEu.customerID }}</td>
                    <td>{{ errEu.customerUserID}}</td>
                    <td>{{ errEu.environment}}</td>
                </tr>
        </table>
    </td>
    <td>...</td>
</tr>

See what is displayed here

2 个答案:

答案 0 :(得分:1)

您没有正确关闭代码:

<table id="table3" class="table table-striped">
    **<tr>**
        <th>CustomerID</th>
        <th>CustomerUserID</th>
        <th>Environment</th>
        <th>Time Elapsed</th>
        <th>Migrated </th>

        <tr ng-repeat="runEu in runMig24InEurope | filter:searchRunEur">
            <td>{{ runEu.customerID }}</td>
            <td>{{ runEu.customerUserID}}</td>
            <td>{{ runEu.environment}}</td>
        </tr>
    **</tr>**
</table>

<tr>未关闭(在所有表格中)

答案 1 :(得分:0)

问题是<td>标签内的表格显示在单元格的中心。要解决这个问题,我必须放<td valign="top">