Tenho este css
.positivo { font-family: "Montserrat"; font-style: normal; font-weight: normal; font-size: 12px; line-height: 120%; text-align: left; color: #939b13; } .negativo { font-family: "Montserrat"; font-style: normal; font-weight: normal; font-size: 12px; line-height: 120%; text-align: left; color: #cc6939; } .tabela { border: 2px solid rgba(169, 171, 173, 0.5); box-sizing: border-box; border-radius: 8px; width: 340px; height: 294px; } .meioTabela { border: 1px solid rgba(169, 171, 173, 0.5); }
tenho este html
<table class="tabela"> <tbody *ngFor="let extrato of extratos" [ngClass]="{ negativo: extrato.tipo === 'PRODUTO', positivo: extrato.tipo === 'NOTA_FISCAL' }" > <tr> <td>{{ extrato.dataHora | date: "shortDate" }}</td> <td>{{ extrato.descricao }}</td> <td>{{ extrato.ponto }} pontos</td> </tr> <tr class="meioTabela"> <td colspan="3"></td> </tr> </tbody> </table>
no browser fica assim:
![](https://www.guj.com.br/uploads/default/original/3X/9/3/938a867aeb1c416a30ce03141fc92dc14cc159d9.png)
mas quero que fica assim:
![](https://www.guj.com.br/uploads/default/original/3X/b/1/b17e81357742ce325121b3b8554b135849221f95.png)
O que devo ajustar no css/html ?