In my angular7 app, I have implemented a is-fullwidth Bulma table that is functioning correctly. However, I now need to incorporate an angular component within each row, with the td tags contained in that component. The issue arises when I do this, as the table rows no longer span its full width.
<table class="table is-fullwidth">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of rows">
<app-table-row [details]="row">
</app-table-row>
</tr>
</tbody>
</table>
table-row.component.html
<td>
<div *ngIf="!showField"> {{ details.name }} </div>
<div *ngIf="showField" class="field">
<div class="control">
<input [value]="details.name" class="input" type="text">
</div>
</div>
</td>
<td>{{ details.address }}</td>
This setup produces the following result:
If I revert back to using regular td tags without the angular component, the table spans correctly. Like this.
Why does it not work when the angular component is added? And how can this issue be resolved?