Реализует загрузочную таблицу с помощью ngFor — Angular

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

Использование table-striped table-dark из https://getbootstrap.com/docs/4.1/content/tables/

Но я делаю это неправильно в своем html-файле и не могу исправить идентификатор. У меня вся дата в одном столбце.

Это мой HTML:

<div class = "users-container">

  <div class = "d-md-flex h-md-100 align-items-center">

    <div class = "col-md-6 ">
      <div class = "d-md-flex align-items-center text-center justify-content-center">
        <div class = "logoarea pt-5 pb-5">
          <h2>All registered users</h2>
        </div>
      </div>
    </div>
  </div>
  <br>
  <br>

  <h3 *ngIf = "!users.length">There are no users registered!</h3>

  <table class = "table table-striped table-dark">
    <thead>
      <tr>
        <th scope = "col">ID</th>
        <th scope = "col">Name</th>
        <th scope = "col">Email</th>
        <th scope = "col">Create on</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <hr *ngIf = "users.length">
        <div class = "all-users" *ngFor = "let users of users">
          <th scope = "row">{{users.id}}</th>
          <td>{{users.name}}</td>
          <td>{{users.email}}</td>
          <td></td>
        </div>
      </tr>
    </tbody>
  </table>

  <!-- <hr *ngIf = "users.length">
  <div class = "all-users" *ngFor = "let users of users">
    {{users.name}}
  </div> -->
</div>

Вот результат: