динамическое создание таблиц разделительные линии таблиц не выравнивают загрузочный угол

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

в обеих таблицах строки между столбцами строк таблицы и т. Д. Должны располагаться в одной строке.

мой 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 мне нужно добавить или изменения, которые мне нужно сделать, чтобы сделать то, что я хочу, чтобы произошло?

обновление:

, поэтому кажется, что мне нужно установить часть ширины каждого тд, чтобы это исправить.

Answer 1

Я внес некоторые изменения. В соответствии с вашим массивом, циклическая обработка тела не требует циклической таблицы.Я добавил границу в таблицу, чтобы получить четкое представление.

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