css issue fix table design

Question

Please can anyone help me to fix the design of my table to be more clear and more presentable?

I want 6 months for example in front of engagement, 599 DT I front of the amount ... I will be grateful if someone helps me and thanks to you in advance for your answer.

<table class="table table-bordered">
<thead>
  <tr>
    <th>Description</th>
    <th>Amount</th>
    <th>Engagement</th>
  </tr>
</thead>
<tbody>
  <tr>
    <div *ngFor="let item of Ventes.telephones">
    <td class="odd">Phone Payment</td>
    <td class="odd">{{item.prix}} DT</td>
    <div *ngFor="let eng of Ventes.engagements">
      <td class="odd">{{eng.description}} month</td>
    </div>
  </div>
</tr>
<tr>
  <div *ngFor="let off of Ventes.offres">
    <td class="odd">offre Payment</td>
    <td class="odd">{{off.prix}} DT</td>
  </div>
  <div *ngFor="let eng of Ventes.engagementOffre">
    <td class="odd">{{eng.description}} month</td>
  </div>
</tr>