Question

我正在用角度应用程序构建UI，需要对以下屏幕快照中突出显示的名为Subscriptions的列进行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-行部分-折叠

以折叠视图显示整个表格的屏幕截图4

编辑

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

因此它应该显示法定类别名称A级B级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

您不必选择tr和td的方向。 tr是行。 td和th始终是在该行中创建新列的单元格。 colspan让一个td或th占用多列。您的桌子应该大致像这样（尽管我也不熟悉angular）。

table {
  border-collapse: collapse;
  width: 100%;
}

table, td {
  border: 1px solid black;
  text-align: center;
  padding: 5px;
}

th {
  border: 1px solid black;
  text-align: left;
  padding: 5px;
}

tr:hover {background-color: #EFF3FB;}

td:nth-child(odd) {background-color: #E7EFFE;}

<table style="border-style: solid; border-width: 1px; padding: 25px;">

<tr>
<th class="tableItem bold">Legal Class Name</th>
<td class="tableItem">Class B</td>
<td class="tableItem">Class A</td>
<td class="tableItem">Class D</td>
<td class="tableItem">Class B</td>
<td class="tableItem">Class A</td>
<td class="tableItem">Class B1</td>
<td class="tableItem">Class C</td>
</tr>

<tr>
<th class="tableItem bold">Last edited</th>
<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>
<th class="tableItem bold">Legal class ID</th>
<td class="tableItem">11166</td>
<td class="tableItem">11167</td>
<td class="tableItem">13714</td>
<td class="tableItem">13717</td>
<td class="tableItem">13713</td>
<td class="tableItem">13716</td>
<td class="tableItem">13715</td>
</tr>

<tr>
<th class="tableItem bold">Subscription</th>
<td colspan = "7"> </td>
</tr>

</table>

https://stackoverflow.com/a/31408141/7724517

编辑：您将需要两个循环。 LegalClass对象中的所有水平标题及其关联字段（外部），所有Legal类对象中的所有标题（内部）。外部的将标题项放在第一位（例如：Legal Class Name），内部的将每个法律类的值（在此示例中为描述）。我希望这是有道理的。这种伪代码有点像python。

FieldNames = {'Legal Class Name':'Description', 'Last Edited':'', 'Legal Class ID':'Id', 'TERMS':'', 'SUBSCRIPTIONS':'', 'Primary Currency':'CurrencyId'}
html = ""
foreach Field in FieldNames:
    html += "<tr> <th class="tableItem bold">Field.Key</th>"
    foreach LegalClass in LegalClassList:
        html += "<td class="tableItem">LegalClass.Field.Value</td>""
    html += "</tr>"

编辑2：大概是这样的。再说一次，我不精通章鱼。

<table>
  <ng-container>
    <tr *ngFor="let Row of Rows">
      <th class="tableItem bold">{{ Row.Header }}</th>
      <td *ngFor="let LFC of LegalFinancialClass" class="tableItem"> {{ LFC.Row.Value }} </td>
    </tr>
  </ng-container>
</table>

Answer 2

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

<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循环来生成所有行。

colspan没有应用到表的列

2 个答案: