foreach showing two results in just one column - Laravel 9.x / Livewire - laravel

Question

When I trigger foreach to show the products registered in each process, separated by line and column, it returns the result all in just one line.
Sorry about my English
Example:
ID
header 2
1525, 1523
Item 1, Item 2
what i want to show
ID
Name
1525
Item 1
1523
Item 2
Back End:
`
public function viewLicitacao($id) {
$licitacao = Licitacao::find($id); $this->showModalLicitacao();
$this->licitacao_id_processo = $licitacao->id;
$this->licitacao_destino = $licitacao->cliente_nome;
$this->licitacao_date_entrega = $licitacao->date_entrega;
}
Front End:
#if($isModal == true)
#foreach($licitacao as $processo)
<div class="modal fade" id="ModalLicitacao">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Licitação - {{ $processo->id; }}</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h4>Informações das licitações</h4>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>N° do Processo: </label>
<input class="form-control" type="number" wire:model="licitacao_id_processo" placeholder="Informe o N° do processo" readonly/>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="destino">Destinatário: </label>
<input type="text" class="form-control" wire:model="licitacao_destino" placeholder="Informe o nome do destinatário" readonly/>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Data da entrega:</label>
<input type="text" wire:model="licitacao_date_entrega" class="form-control" placeholder="Data de entrega da mercadoria" readonly>
</div>
</div>
</div>
<h4>Produtos da licitação</h4>
<div class="row">
<table class="table table-hover text-nowrap">
<thead>
<tr>
<th>ID</th>
<th>Nome</th>
<th>Preço Unit</th>
<th>Quantidade</th>
<th>Qt. Disponivel</th>
<th>Ações</th>
</tr>
</thead>
<tbody>
#forelse($processo->products as $key => $products)
<td>{{ $products->id_product }}</td>
#empty
<td>Nenhum produto foi cadastrado nessa licitação</td>
#endforelse
</tbody>
</table>
</div>
</div>
<div class="modal-footer justify-content-between">
<button type="submit" wire:click="closeModalLicitacao()" class="btn btn-default">Fechar</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
#endforeach
<!-- /.modal -->
#endif
The two tables have relationships
Modal ProductLicitacao:
class ProductLicitacao extends Model
{
use HasFactory;
protected $fillable = [
'id_product', 'licitacao_id', 'name', 'qty', 'price_unit',
];
public function licitacao()
{
return $this->belongsTo(Licitacao::class);
}
}
Modal Licitacao:
class Licitacao extends Model
{
use HasFactory;
protected $fillable = [
'processo_number', 'cliente_nome', 'status', 'user_id', 'date_entrega', 'alert',
];
protected $dates = [
'date_entrega'
];
public function products()
{
return $this->hasMany(ProductLicitacao::class, 'licitacao_id');
}
}
Help me to solve this problem that seems to be simples, but it is being monstrous for my iniation in web development.

Answer 1

Try adding the tag <tr> before the <td>
<tbody>
#forelse($processo->products as $key => $products)
<tr>// <-- here
<td>{{ $products->id_product }}</td>
//other columns(td), you may have
</tr>// <-- and here
#empty
<td>Nenhum produto foi cadastrado nessa licitação</td>
#endforelse
</tbody>