时间戳

首页 > 解决方案 > 表boostrap 5和Angular中的总是等宽列

angular - 表boostrap 5和Angular中的总是等宽列

问题描述

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

<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来尝试运气，但对我没有帮助。

请分享你的想法。

标签： angulartwitter-bootstrapbootstrap-5

解决方案

如果隐藏th或td，则会破坏表格的布局，因为它们的宽度总和不再是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>

推荐阅读