表引导程序 5 和 Angular 中的列总是等宽

Question

在我使用 boostrap 5 的 Angular 应用程序中，我有一张这样的表格

<table>
<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>

正如您在标记中看到的那样，它是一个表格，其中的列根据某些值隐藏。

我的要求是所有列都需要等宽与隐藏列无关。

这是我可以使用 css 完成的事情

th{
width:20%;
}

它适用于基本情况。但如果隐藏一列，就会出错。

那么在 boostrap 中是否有使所有表格列的宽度始终相同的方法？

如果是网格系统，使用 row 和 col 很简单

<div class='row'>
   <div class='col'></div>
   <div class='col'></div>
   <div class='col'></div>
   <div class='col'></div>
   <div class='col'></div>
</div>

我期待类似的东西。我通过将类行指定为 tr 和 col 来尝试运气，但对我没有帮助。

请分享你的想法。

Answer 1

如果隐藏 th 或 td，则会破坏 table 的布局，因为它们的宽度总和不是 100%了。

要实现这一点，您应该在 th 和 td 中的每一个中使用一个元素并将其隐藏。为此，请保持布局不变。

th {
  width: 20%;
}

<table>
  <thead>
    <tr>
      <th>
        <span [ngClass]="{'d-none':prop1==0}"></span>
      </th>
      .....
      <tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <span [ngClass]="{'d-none':prop1==0}"></span>
      </td>
      .....
    </tr>
  </tbody>
</table>