Bulma table rows not spanning full width

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.