CODEWITHSUNDEEP
htmlangularjs
Rafa Ayadi
Rafa Ayadi

Reputation: 347

Table inside table ng-repeat not displayed correctly?

I have a 2 Lines X 3 Columnus table in which, in the second row, I am adding a table in every cell. In these tables, I am using Angular with ng-repeat to display data. My problem is that the data is not diplayed correctly. Here is my code and a screenshot of the result.

<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

Upvotes: 1

Views: 369

Answers (2)

Rafa Ayadi
Rafa Ayadi

Reputation: 347

The problem was that the Table inside the <td> tag was displayed in the center of the cell. To resolve that, I had to put <td valign="top">.

Upvotes: 0

Martijn Welker
Martijn Welker

Reputation: 5605

You're not properly closing your tags:

<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>

The <tr> isn't closed (in all your tables)

Upvotes: 1

Related Questions