无法让数据跨越正确的列数答案

【问题标题】：Cannot get data to span correct number of columns无法让数据跨越正确的列数
【发布时间】：2019-12-24 20:20:27
【问题描述】：

我正在用 HTML 创建一个表格。我想使用colspan 跨越所有列。我正在使用几个不同的 ngIf 语句创建此表。

我按照其他帖子中的建议添加了width，但它也不起作用。

我的 html 看起来像：

<!DOCTYPE html>
<br>
<div *ngIf="finalData.length>0">
    <p>User:<strong> {{ourUser}}</strong> </p>

    <div *ngIf="Error1; else Error1">
        <p> It appears that this user cannot be found on Platform 1, so we cannot display any user information.</p>
    </div>

    <ng-template #noError1>
        <div>
            <div>
                <table>
                    <thead>
                        <tr>
                            <th scope="col"> Platform 1</th>
                            <th>Name</th>
                            <th>ID1</th>
                            <th>Email</th>
                            <th>ID2</th>
                            <th>Status</th>
                        </tr>
                    </thead>

                    <tr>

                        <th <th>Platform 1</th>
                        <td>{{finalData[0].name}}</td>
                        <td>{{finalData[0].id1}}</td>
                        <td>{{finalData[0].userEmail}}</td>
                        <td>{{finalData[0].userID}}</td>
                        <td>N/A</td>
                    </tr>
                    <div *ngIf="Error2; else noError2">
                        <tr>
                            <th <th>Platform 2</th>
                            <tdcolspan="5" width="100"> It appears that this user cannot be found</td>
                        </tr>
                    </div>

                    <ng-template #noError2>
                        <tr>
                            <th <th>Platform 2</th>
                            <td>{{finalData[1].name}}</td>
                            <td>{{finalData[1].id1}}</td>
                            <td>{{finalData[1].userEmail}}</td>
                            <td>Not Listed</td>
                            <td>{{status}}</td>
                        </tr>
                    </ng-template>

                    <div *ngIf="Error3; else noError3">
                        <tr>
                            <th>Platform 3</th>
                            <td colspan="5"> It appears that this user cannot be found on Platform 3</td>
                        </tr>
                    </div>
                    <ng-template #noError3>
                        <tr>
                            <th>Platform 3</th>
                            <td>{{finalData[2].name}}</td>
                            <td>{{finalData[2].id1}}</td>
                            <td>{{finalData[2].userEmail}}</td>
                            <td>{{finalData[2].userID}}</td>
                            <td>N/A</td>

                        </tr>
                    </ng-template>

                </table>
            </div>
        </div>
        <br>
        <div *ngIf="Error4; else noError4">
            <p></p>
        </div>
        <ng-template #noError4>
            <div>
                <div>
                    <table>
                        <thead>
                            <tr>
                                <th <th>Platfrom </th>
                                <th <th>Number of Active IDs</th>
                                <th <th>User ID</th>
                            </tr>
                        </thead>
                        <tr>
                            <th <th>plat</th>
                            <td> {{plat}}</td>
                            <td> {{platID}}</td>
                        </tr>
                        <tr>
                            <th <th>cat</th>
                            <td> {{cat}}</td>
                            <td> {{catID}}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </ng-template>

    </ng-template>
    <br>

    <button (click)='onBack()' id='back'>
        <span>Back to Results</span>
    </button>
</div>

我想要一些看起来像的东西

|           |            |            |            |            |           | 
|User Info. |            It appears that this user cannot be found.         |
|           |            |            |            |            |           |

相反，我得到了

|           |            |            |            |            |           | 
|User Info. |It appears  |                                                  |
            |that this   |                                                  |
            |user cannot |                                                  |
            |be found.   |                                                  |                      
|           |            |            |            |            |           |

否则，表格将按预期工作。

Stackblitz example

有什么想法吗？

【问题讨论】：

第一列不应该是2的colspan吗？或者您可以插入一个空列。
为什么是 2 而不是 1？这并没有改变结果。
那么该行是否也在表中？
是的，它在一个表中。我执行 ngIf 来检查我是否有属于 5 个单元格的数据。如果我这样做了，我可以填写它们。如果没有，那么我想打印“似乎找不到该用户。”除了在所有五个单元格而不是一个单元格上打印消息之外，一切都按预期工作。
您可以添加一个空的来创建一个空单元格。第二个问题是它似乎适合一个单元格而不是 5 个单元格，但是我运行您的代码没有找到类似的东西。你能分享你与之相关的整个代码吗

标签： html angular html-table col

【解决方案1】：

这里不是div：

<div *ngIf="Error3; else noError3">

使用<ng-container>，它不会包含在 DOM 中，对表结构几乎没有危害：

<ng-container *ngIf="Error3; else noError3">

【讨论】：

【解决方案2】：

发现问题。这实际上非常容易。您不能将表格行包装在 div 中。

<tr *ngIf="Error2; else noError2">
    <th>Platform 2</th>
    <td colspan="5"> It appears that this user cannot be found on Platform 2.</td>
</tr>

【讨论】：