Bootstrap 4 支出记录表格对齐异常，调整width属性无效问题咨询

问题原因 #

HTML <table> 元素的合法直接子元素仅支持 <thead>、<tbody>、<tr> 等表格专属标签，你在 <table> 内部直接插入了带 *ngFor 的 <div> 标签，浏览器会自动将这个不符合表格结构的 <div> 移到表格外部渲染，彻底打乱了表格的行列对应关系，所以即使设置width属性也不会生效。

修复方案 #

把 *ngFor 循环绑定到 <tr> 标签上，删掉多余的 <div> 包裹即可，修改后的表格部分代码如下：

<table class = "table table-striped table-bordered" >
  <tr>
    <th>Expense</th>
    <th>Amount</th>
    <th>Actions</th>
  </tr>

  <tr *ngFor ="let expense of expenses"> 
    <td>{{expense.expense}}</td>
    <td>{{expense.amount | currency: '&euro;'}}</td>
    <td> <a routerLink ="/editexpense/{{expense.id}}">Edit</a>
         <button *ngIf="expense.id" (click)="deleteExpense(expense.id!)">Delete</button>
    </td>  
  </tr>
</table>

如果确实需要一个标签承载循环逻辑不想写在tr上，可以用Angular的<ng-container>，它不会生成真实DOM元素，不会破坏表格结构：

<ng-container *ngFor ="let expense of expenses">
  <tr> 
    <!-- 表格内容保持不变 -->
  </tr>
</ng-container>

内容的提问来源于stack exchange，提问作者Sabrina