colspan not getting applied to column of table - html

Question

I am building an UI in angular application and need to do colspan for column called Subscriptions highlighted in the screenshot below. I tried applying colspan but doest seem to take effect.
What I need is something like this
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>
What gets generated on on inspect of the element . I have shared it across three screenshots as it was difficult to capture in one
Screenshot 1 - The header section
Screenshot 2 - The row section - Expanded
Screenshot 3 - The row section - Collapsed
Screenshot 4 of the entire table in collapsed view
Edit
I have tried the pseudo code suggested by #cpcolella in angular but need to display as seen in the screenshot above in the post
So It should display
Legal Class Name Class A Class B Class C in one row
<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>
Output of the logic above

Answer 1

You are generating the code wrong. I don't use angular, but the final table structure should look like this:
<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>
I've only generated 3 rows. As you can see, each row has 8 column (like yours), except the last one, that has only 2, with one of them spanning 7 columns.
You should not use a for cycle for generating all rows, as the subscription row is different.

Answer 2

You don't get to choose which direction tr and td go. tr is alwys a row. td and th are always cells that make a new column in that row. colspan lets one td or th take up multiple columns. Your table should prbasbly look something like this (though I am also not familiar with 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
EDIT:
You'll need to have two loops. One through all of the horizontal headings and their associated field in the LegalClass object (outer) and one through all of the legal class objects (inner). The outer one will put the header item in first (for example: Legal Class Name) and the inner one will put the values for each legal class (in this example, the description). I hope this makes sense. This pseudo code is sort of like 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>"
EDIT 2:
Something like this maybe. Again, I'm not proficient with 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>