colspan 未应用于表格列

Question

我正在 Angular 应用程序中构建一个 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 建议的伪代码，但需要显示如帖子中上面的屏幕截图所示

所以它应该显示 合法类名 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 循环来生成所有行，因为订阅行不同。

Answer 2

你不能选择 tr 和 td 去哪个方向。 tr 总是一行。 td 和 th 始终是在该行中创建新列的单元格。 colspan 让一个 td 或 th 占据多列。你的桌子应该看起来像这样（虽然我也不熟悉角度）。

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 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： 可能是这样的。再说一次，我不精通angualar。

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