Bulma table rows not spanning full width - css

Question

I have a is-fullwidth Bulma table in my angular7 app which works fine. But now I need to add a angular component inside each row, and td tags lies inside that component. But when I do that, table rows not spans to 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 outputs the following
if I remove the angular component and add tds normally, it spans correctly. Like this.
Why is it not work when angular component added? And how should I fix it?

Answer 1

The reason this is happening is probably because the td elements are not direct children of the tr, but children of the app-table-row component.
Not sure that it would make sense in your case, but you can change the selector property in the app-table-row component to select the tr itself, like so:
#Component({
selector: 'tr[app-table-row]',
...
})
export class AppTableRowComponent {}
And use it like this:
<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">
</tr>
</tbody>
</table>
This way the app-table-row is not a separate node in the DOM.