How to change the data position in Ionic

Hi I want to ask how to make the data like photo 1 ? my current status is photo 2.


html
<template>
  
  <ion-page>
    <ion-content :fullscreen="true">
      <ion-header>
        <ion-toolbar>
          <ion-title size="large">{{$t("unilevelDevelopmentGroupBonusStatement")}}</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-card>
        <ion-card-content>
          <ion-item color="secondary">
            <ion-label>Search</ion-label>
          </ion-item>
          <table>
            <thead>
            </thead>
            <td>Select Month</td>
            <td>
              <ion-select placeholder="Select Month"  interface="action-sheet" v-model="SelectedMonth" @ionChange="Test($event)" >
                <ion-select-option v-for="month in monthcom" :key="month" :value="month.MonthCSID">
                  {{monthNum[month.csMonth-1]}} {{month.csYear}}
                </ion-select-option>
              </ion-select>
            </td>
            </table>
            <ion-item color="secondary">
            <ion-label>{{$t('information')}}</ion-label>
          </ion-item>
            <table>
            <thead>
              <th>{{$t("memberID")}}</th>
              <th>{{$t('name')}}</th>
            </thead>
            <tr>
              <td data-label="Member ID">{{mList.mAcName}}</td>
              <td data-label="Name">{{mList.mName}}</td>
            </tr>
            </table>
            <ion-item color="secondary">
            <ion-label>Lastest Bonus</ion-label>
          </ion-item>
          <table >
            <thead>
              <th>Sales Date</th>
              <th>Unilevel Bonus(USD)</th>
              <th>Development Bonus(USD)</th>
              <th>Group Bonus(USD)</th>
              <th>Bonus Amount(USD)</th>
              <th>Bonus Amount (RM)</th>
            </thead>
              <tbody >
                <tr v-for="item in udgBonusList" :key="item">
                  <td data-label="Sales Date">{{formatDate(item.txDate)}}</td>
                   <ion-item v-for="item2 in item.bonusDetail" :key="item2">
                    <td data-label="Unilevel Bonus (USD)" v-if="item2.ttID == 'UB1'">{{item2.txAmount}}</td>
                    <td data-label="Development Bonus (USD)" v-if="item2.ttID =='DSB'">{{item2.txAmount}}</td>
                    <td data-label="Group Bonus (USD)" v-if="item2.ttID =='PB1'">{{item2.txAmount}}</td>
                  </ion-item>
                  
                  <td data-label="Bonus Amount (USD)">{{item.txAmount}}</td>
                  <td data-label="Bonus Amount (RM)">{{item.txAmountRM}}</td>
                </tr>
              </tbody>
            </table>
        </ion-card-content>
      </ion-card>
    </ion-content>
  </ion-page>
</template>

1 Like

You can use the ion grid for this. Ion-Grid: Display Grids to Build Mobile-First Custom App Layout