动态 table 创建 table table 的分割线未对齐 bootstrap angular

Question

我正在使用 bootstrap 和 angular 4.

我的html代码如下

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

这会根据我在 ts

中使用的模型创建以下 tables

两个 tables table 行列之间的线等需要对齐。

我的 css 目前是空的，这里是我的 ts

object = [
    {
      table: [
        {
          category: 'Dev thing',
          capability: 'Data Access',
          adopt: 'Spring Data',
          trial: '',
          assess: '',
          hold: ''
        },
        {
          category: 'Dev thing',
          capability: 'Data Access',
          adopt: 'Spring Data',
          trial: '',
          assess: '',
          hold: ''
        },
        {
          category: 'Dev thing',
          capability: 'Data Access',
          adopt: 'Spring Data',
          trial: '',
          assess: '',
          hold: ''
        },
      ],
      showindex: 1
    },

    {
      table: [
        {
          category: 'Dev thing',
          capability: 'Data Access',
          adopt: 'Spring Data',
          trial: 'stuff',
          assess: 'stuff',
          hold: 'stuff'
        },
        {
          category: 'Dev thing',
          capability: 'Data Access',
          adopt: 'Spring Data',
          trial: '',
          assess: '',
          hold: ''
        },
        {
          category: 'Dev thing',
          capability: 'Data Access',
          adopt: 'Spring Data',
          trial: '',
          assess: '',
          hold: ''
        },
      ],
      showindex: 1
    }
  ];

我需要添加或修改什么 css 才能实现我想要的效果？

更新：

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

Answer 1

我已经为你的数组做了一些 changes.according tbody 循环就足够了，不需要循环 table。为了看得清楚，我在 table 中添加了边框。

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

动态 table 创建 table table 的分割线未对齐 bootstrap angular

dynamic table creation table dividing lines of tables do not align bootstrap angular

css

angular

css-tables