Align 2 Information in a column with Table Using *ngFor

Question

So I’d like to line up my table, currently it’s coming like this:

But the expected would be something like:

in this case, each part of the object in a given row column (showing both the status and the name of the row in 1 Row, aligned with the Row column)

I have the following code:

Component.html

<table>

<tr>
    <th></th>
    <th *ngFor="let item of jsonReturn"> {{item.groupName}} </th>
</tr>
<tr>
    <th>Status</th>
    <th *ngFor="let item of jsonReturn"> {{item.groupStatus}} </th>
</tr>
<tr>
    <th>Fila Principal</th>
    <th *ngFor="let item of jsonReturn"> {{item.mainQueue}} </th>
</tr>

<tr>
    <th >Filas Secundárias</th>
    <ng-container *ngFor="let item of jsonReturn">
        <span *ngFor="let subItem of item.queueStatus">
            <td> {{subItem.queueName}} </td>
            <td> {{subItem.queueStatus}} </td>
        </span>
    </ng-container>

</tr>

Component.css

    table {
    border-collapse: collapse;
    width: 100%;
    border-spacing: 0;
    border-collapse: separate;
    text-indent: initial;
  }
  
  th {
  font-size: 12px;
  font-weight: 500;
  color: #2196f3;
  border-radius: 4px;
  font-family: Roboto, "Helvetica Neue", sans-serif;
  white-space: nowrap;
  background-color: #e8eaf6;
  }
  
  th, td {
  padding: 8px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgba(0,0,0,.12);
  text-align: center !important;
  min-width: 100px;
  }
  
  tr:hover {
      background-color: #c5cae9 !important;
  }

Object Example:

    jsonReturn:any = [
    {groupName:"Grupo",groupStatus:"Ativo",mainQueue:"Fila 1",
    queueStatus:[{queueName:"Fila 2",queueStatus:"Aberta"},{queueName:"Fila 3",queueStatus:"Aberta"},{queueName:"Fila 4",queueStatus:"Aberta"}]},
    
    {groupName:"Grupo 1",groupStatus:"Desativado",mainQueue:"Fila 2",
    queueStatus:[{queueName:"Fila 1",queueStatus:"Fechado"},{queueName:"Fila 3",queueStatus:"Aberta"},{queueName:"Fila 4",queueStatus:"Aberta"}]},

    {groupName:"Grupo 2",groupStatus:"Ativo",mainQueue:"Fila 3",
    queueStatus:[{queueName:"Fila 1",queueStatus:"Aberta"},{queueName:"Fila 2",queueStatus:"Aberta"},{queueName:"Fila 3",queueStatus:"Aberta"}]},

    {groupName:"Grupo 3",groupStatus:"Ativo",mainQueue:"Fila 4",
    queueStatus:[{queueName:"Fila 1",queueStatus:"Aberta"},{queueName:"Fila 2",queueStatus:"Aberta"},{queueName:"Fila 3",queueStatus:"Aberta"}]}
  ]