Table columns not not splitting row from different component

How can I split my table row elements between collumns when I use table row from different component.

client-list.html

<table mdbTable>
    <thead class="black white-text">
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Phone number</th>
        <th>Procedure</th>
        <th>Doctor</th>
        <th>Registration</th>
        <th>Registration</th>
        <th>Edit</th>
        <th>Serve</th>
      </tr>
    </thead>
    <tbody>
      <tr client-list-item *ngFor="let c of clients" [client]="c"></tr>
    </tbody>
  </table>

client-list-item.html

<tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td><a href="">Edit</a></td>
  <td><a href="">Serve</a></td>
</tr>

client-list-item.ts

@Component({
  selector: '[client-list-item]',
  templateUrl: './client-list-item.component.html',
  styleUrls: ['./client-list-item.component.css']
})
export class ClientListItemComponent {
  @Input() client: Client;
}