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

Question

I am using bootstrap and angular 4.

My html code is as follows

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

this creates the following tables based on the model I am using in my ts

both tables the lines between table rows columns etc need to line up.

my css is currently empty and just to make it clear here is my 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
    }
  ];

what css do I need to add or modifications do I need to make to make what I want happen?

update:

so its seems that I need to set a width part of each td to fix this.

Answer 1

I have made some changes.according to your array tbody looping is enough no need to loop table. I have added border to table in order to get a clear view.

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