Bootstrap 5+Angular场景下表格动态列始终保持等宽的方案咨询

方案1：基于现有表格结构修改（改动最小） #

Bootstrap 5.2及以上版本已经内置了table-layout-fixed工具类，配合table类使用即可实现你要的效果，原理是通过table-layout: fixed规则让表格的可见列自动平分整个表格宽度，无需修改你现有的动态隐藏逻辑。
修改后的代码如下：

<table class="table table-layout-fixed w-100">
<thead>
  <tr>
    <th [ngClass]="{'d-none':prop1==0}"></th>
    <th [ngClass]="{'d-none':prop2==0}"></th>
    <th [ngClass]="{'d-none':prop3==0}"></th>
    <th [ngClass]="{'d-none':prop4==0}"></th>
    <th [ngClass]="{'d-none':prop5==0}"></th>
  </tr>
</thead>
<tbody>
 <tr>
   <td [ngClass]="{'d-none':prop1==0}"></td>
   <td [ngClass]="{'d-none':prop2==0}"></td>
   <td [ngClass]="{'d-none':prop3==0}"></td>
   <td [ngClass]="{'d-none':prop4==0}"></td>
   <td [ngClass]="{'d-none':prop5==0}"></td>
 </tr>
</tbody>
</table>

如果你使用的Bootstrap版本低于5.2，没有内置table-layout-fixed类，仅需新增一行自定义CSS即可：

table {
  table-layout: fixed;
  width: 100%;
}

注意：不要给tr加row类、th/td加col类，table元素的默认布局规则和栅格的flex布局不兼容，混用会导致样式异常。

方案2：使用栅格flex结构（匹配你熟悉的row/col用法） #

如果更习惯栅格系统的使用逻辑，可以直接把表格结构替换为div+栅格的实现，完全符合你预期的自动平分宽度效果，隐藏任意列后剩余列都会自动等分宽度：

<!-- 表头 -->
<div class="row">
  <div class="col border" [ngClass]="{'d-none':prop1==0}"></div>
  <div class="col border" [ngClass]="{'d-none':prop2==0}"></div>
  <div class="col border" [ngClass]="{'d-none':prop3==0}"></div>
  <div class="col border" [ngClass]="{'d-none':prop4==0}"></div>
  <div class="col border" [ngClass]="{'d-none':prop5==0}"></div>
</div>
<!-- 数据行，每一行都套一层row -->
<div class="row">
  <div class="col border" [ngClass]="{'d-none':prop1==0}"></div>
  <div class="col border" [ngClass]="{'d-none':prop2==0}"></div>
  <div class="col border" [ngClass]="{'d-none':prop3==0}"></div>
  <div class="col border" [ngClass]="{'d-none':prop4==0}"></div>
  <div class="col border" [ngClass]="{'d-none':prop5==0}"></div>
</div>

代码中的border类用于模拟表格边框，不需要可以直接删除。

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