Ajustes no CSS para ficar igual ao protótipo

[guilhermebhte]

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:

mas quero que fica assim:

O que devo ajustar no css/html ?

[guilhermebhte]

Alguma ajuda ?