colspan not getting applied to column of table

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"></td>
                <td class="tableItem"></td>
                <td class="tableItem"></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>

from colspan not getting applied to column of table