html - colspan 未应用于表的列

Question

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

我需要的是这样的东西

HTML

        <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 - 行部分 - 折叠

折叠 View 中整个表格的屏幕截图 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

您生成的代码有误。我不使用angular，但最终的表结构应该是这样的:

<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 循环来生成所有行，因为订阅行是不同的。