<table class="table table-bordered table-hover">
  <thead class="thead-light">
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Species</th>
      <th>Gender</th>
      <th>Homeworld</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <sl-record *ngFor="let recordElement of records" [record]="recordElement"></sl-record>
    </tr>
  </tbody>
</table>

<tr>
  <td>{{record.id}}</td>
  <td>{{record.name}}</td>
  <td>{{record.species}}</td>
  <td>{{record.gender}}</td>
  <td>{{record.homeworld}}</td>
  <td>
    <div class="btn-group btn-group-sm" role="group" aria-label="Actions">
      <button type="button" class="btn btn-secondary">
        <i class="fa fa-pencil" aria-hidden="true"></i> Edit
      </button>
      <button type="button" class="btn btn-danger">
        <i class="fa fa-trash-o" aria-hidden="true"></i> Remove
      </button>
    </div>
  </td>
</tr>