colspan 未应用于表的列

Question

我正在 Angular 应用程序中构建一个 UI，需要对下面屏幕截图中突出显示的名为 Subscriptions 的列进行 colspan。我尝试应用 colspan 但似乎没有效果。

我需要的是这样的东西

网页

        <tr>
            <th class="tableItem bold">Legal Class Name</th>
            <th class="tableItem bold">Last Edited</th>
            <th class="tableItem bold">Legal Class ID</th>
            <th class="tableItem bold"></th>
            <th class="tableItem bold">TERMS</th>
            <th class="tableItem bold">SUBSCRIPTIONS</th>
            <th class="tableItem bold">Primary Currency</th>

        </tr>



        <ng-container>
            <!-- <tr *ngFor="let f of fundClass['LegalFundClassDetailsViewModel'] | keyvalue"> -->
            <tr *ngFor="let f of LegalFundClasses.LegalFundClassDetailsViewModel">
                <td class="tableItem">{{f.Description}}</td>
                <td class="tableItem"></td>
                <td class="tableItem">{{f.Id}}</td>
                <td class="tableItem"></td>
                <td class="tableItem"></td>
                <td colspan="5" class="tableItem"></td>
                <td class="tableItem"> 
                    <kendo-dropdownlist style="width:100%" [(ngModel)]="f.CurrencyId"
                     class="form-control  form-control-sm" [data]="Currencies"
                     [filterable]="false" textField="CURRENCY_NAME" [valuePrimitive]="true" valueField="CURRENCY_ID">
                  </kendo-dropdownlist>
               </td>

            </tr>
        </ng-container>
    </table>

检查元素时会生成什么。我通过三张屏幕截图分享了它，因为很难在一张屏幕截图中捕获它

屏幕截图 1 - 标题部分

屏幕截图 2 - 行部分 - 展开

屏幕截图 3 - 行部分 - 折叠

折叠视图中整个表格的屏幕截图 4

编辑

我已经尝试了 @cpcolella 以角度建议的伪代码，但需要显示如帖子上面的屏幕截图所示

所以它应该在一行中显示合法类名称 Class A Class B Class C

  <div *ngIf="LegalFundClasses && LegalFundClasses.LegalFundClassDetailsViewModel && ColumnNames">


     <table class="fundClassesTable table-striped">
      <tr *ngFor="let c of ColumnNames">
        <th class="tableItem bold">{{ c }}</th>
        <ng-container *ngFor="let f of LegalFundClasses.LegalFundClassDetailsViewModel">
          <td class="tableItem" *ngIf="c == ColumnNames[0]">{{f.Description}}</td>
          <td class="tableItem" *ngIf="c == ColumnNames[1]">{{f.AuditSummary}}</td>
          <td class="tableItem" *ngIf="c == ColumnNames[2]">{{f.Id}}</td>
        </ng-container>
      </tr>
      </table>

        </div>
    </div>

上述逻辑的输出

Answer 1

您生成的代码是错误的。我不使用角度，但最终的表结构应该如下所示：

<table>

<tr>
<th class="tableItem bold">Legal Class Name</th>
<th class="tableItem">Class B</th>
<th class="tableItem">Class A</th>
<th class="tableItem">Class D</th>
<th class="tableItem">Class B</th>
<th class="tableItem">Class A</th>
<th class="tableItem">Class B1</th>
<th class="tableItem">Class C</th>
</tr>

<tr>
<td class="tableItem bold">Last edited</td>
<td class="tableItem"></td>
<td class="tableItem"></td>
<td class="tableItem"></td>
<td class="tableItem"></td>
<td class="tableItem"></td>
<td class="tableItem"></td>
<td class="tableItem"></td>
</tr>

<tr>
<td class="tableItem bold">Legal class ID</td>
<td class="tableItem">123</td>
<td class="tableItem">123</td>
<td class="tableItem">123</td>
<td class="tableItem">123</td>
<td class="tableItem">123</td>
<td class="tableItem">123</td>
<td class="tableItem">123</td>
</tr>

<tr>
<td class="tableItem bold">Subscription</td>
<td colspan = "7"> </td>
</tr>

</table>

我只生成了 3 行。正如您所看到的，每一行都有 8 列（就像您的一样），除了最后一行只有 2 列，其中一列跨越 7 列。

您不应该使用 for 循环来生成所有行，因为订阅行是不同的。