I created a tree with parent and child nodes, but I'm facing an issue where the positions of the checkboxes are not aligned in a straight line. Here is my code snippet:
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
<div>
<button mat-icon-button disabled></button>
<td fxFlex="150px" fxLayoutAlign="start">
{{node.title}}
</td>
<td fxFlex="100px" fxLayoutAlign="center">
<mat-checkbox [(ngModel)]="node.can_view"></mat-checkbox>
</td>
<td fxFlex="100px" fxLayoutAlign="center">
<mat-checkbox [(ngModel)]="node.can_insert"></mat-checkbox>
</td>
<td fxFlex="100px" fxLayoutAlign="center">
<mat-checkbox [(ngModel)]="node.can_update"></mat-checkbox>
</td>
<td fxFlex="100px" fxLayoutAlign="center">
<mat-checkbox [(ngModel)]="node.can_delete"></mat-checkbox>
</td>
<td fxFlex="100px" fxLayoutAlign="center">
<mat-checkbox [(ngModel)]="node.can_export"></mat-checkbox>
</td>
<td fxFlex="100px" fxLayoutAlign="center">
<mat-checkbox [(ngModel)]="node.can_upload"></mat-checkbox>
</td>
<td fxFlex="130px" fxLayoutAlign="center">
<mat-checkbox [(ngModel)]="node.need_approve"></mat-checkbox>
</td>
</div>
</mat-tree-node>
<mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
<div class="mat-tree-node">
<button mat-icon-button matTreeNodeToggle>
<mat-icon>
{{tc.isExpanded(node) ? 'keyboard_arrow_down' : 'chevron_right'}}
</mat-icon>
</button>
<tr >
<td fxFlex="150px" fxLayoutAlign="start">
{{node.title}}
</td>
<td fxFlex="100px" fxLayoutAlign="center">
<mat-checkbox [(ngModel)]="node.can_view" (change)="update('can_view',node.id,$event.checked)" ></mat-checkbox>
</td>
<td fxFlex="100px" fxLayoutAlign="center">
<mat-checkbox [(ngModel)]="node.can_insert" (change)="update('can_insert',node.id,$event.checked)"></mat-checkbox>
</td>
<td fxFlex="100px" fxLayoutAlign="center">
<mat-checkbox [(ngModel)]="node.can_update" (change)="update('can_update',node.id,$event.checked)"></mat-checkbox>
</td>
<td fxFlex="100px" fxLayoutAlign="center">
<mat-checkbox [(ngModel)]="node.can_delete" (change)="update('can_delete',node.id,$event.checked)"></mat-checkbox>
</td>
<td fxFlex="100px" fxLayoutAlign="center">
<mat-checkbox [(ngModel)]="node.can_export" (change)="update('can_export',node.id,$event.checked)"></mat-checkbox>
</td>
<td fxFlex="100px" fxLayoutAlign="center">
<mat-checkbox [(ngModel)]="node.can_upload" (change)="update('can_upload',node.id,$event.checked)"></mat-checkbox>
</td>
<td fxFlex="130px" fxLayoutAlign="center">
<mat-checkbox [(ngModel)]="node.need_approve" (change)="update('need_approve',node.id,$event.checked)"></mat-checkbox>
</td>
</tr>
</div>
<div style="margin-left:1em" [hidden]="!tc.isExpanded(node)">
<ng-container matTreeNodeOutlet></ng-container>
</div>
</mat-nested-tree-node>
</mat-tree>
</tbody>
In my project, I have implemented a tree structure with parent-child relationships, but I am looking to align the checkboxes in a single line.