动态表创建表的表分隔线不对齐引导角度

Question

我正在使用bootstrap和angular 4。

我的html代码如下

relation = User.where('email ilike ?', '%@gmail.com')
arel = relation.arel
stmt = Arel::DeleteManager.new
stmt.from(arel.join_sources.empty? ? User.arel_table : arel.source)
stmt.wheres = arel.constraints
sql = User.connection.to_sql(stmt, relation.bound_attributes)    
=> DELETE FROM "users" WHERE (email ilike '%@gmail.com')

这会根据我在ts中使用的模型创建以下表格

两个表都需要对齐表行列之间的线。

我的css当前为空，只是为了清楚起见，这是我的ts

<div *ngIf="showtable" class="container">
  <div class="row">
    <div class="col-12">
      <table class="table" width="100%">
        <thead>
          <tr>
            <th class="text-center" scope="col">Category</th>
            <th class="text-center" scope="col">Capability</th>
            <th class="text-center" scope="col">Adopt</th>
            <th class="text-center" scope="col">Trial</th>
            <th class="text-center" scope="col">Assess</th>
            <th class="text-center" scope="col">Scope</th>
          </tr>
        </thead>
      </table>
      <table *ngFor="let t of object" class="table table-bordered" width="100%">
        <tbody>
        <tr *ngFor="let d of t.table; let i = index">
          <td  class="text-center">
            <p *ngIf="i === t.showindex">{{d.category}}</p>
          </td>
          <td  class="text-center">
            <p>{{d.capability}}</p>
          </td>
          <td  class="text-center">
            <p>{{d.adopt}}</p>
          </td>
          <td  class="text-center">
            <p>{{d.trial}}</p>
          </td>
          <td  class="text-center">
            <p>{{d.assess}}</p>
          </td>
          <td  class="text-center">
            <p>{{d.hold}}</p>
          </td>
        </tr>
        </tbody>

      </table>
    </div>
  </div>
</div>

要想实现自己的目标，我需要添加或修改哪些CSS？

更新：

所以看来我需要设置每个td的宽度部分以解决此问题。

Answer 1

我做了一些更改。根据您的数组tbody循环就足够了，不需要循环表。我在表格上添加了边框，以便获得清晰的视图。

 <div *ngIf="true" class="container">
      <div class="row">
        <div class="col-12">

          <table class="table table-bordered" border="1" width="100%">
             <thead>
              <tr>
                <th class="text-center" style="text-align:left"><p>Category</p></th>
                <th class="text-center" style="text-align:left" ><p>Capability</p></th>
                <th class="text-center" style="text-align:left" ><p>Adopt</p></th>
                <th class="text-center" style="text-align:left" ><p>Trial</p></th>
                <th class="text-center" style="text-align:left" ><p>Assess</p></th>
                <th class="text-center" style="text-align:left" ><p>Scope</p></th>
              </tr>
            </thead>
            <tbody  *ngFor="let t of object">
            <tr *ngFor="let d of t.table; let i = index">
              <td  class="text-center">
                <p *ngIf="i === t.showindex">{{d.category}}</p>
              </td>
              <td  class="text-center">
                <p>{{d.capability}}</p>
              </td>
              <td  class="text-center">
                <p>{{d.adopt}}</p>
              </td>
              <td  class="text-center">
                <p>{{d.trial}}</p>
              </td>
              <td  class="text-center">
                <p>{{d.assess}}</p>
              </td>
              <td  class="text-center">
                <p>{{d.hold}}</p>
              </td>
            </tr>
         </tbody>
         </table>
        </div>
      </div>
    </div>