在离子应用程序中显示列表的更好方法

Question

我正在使用collection-repeat指令来显示我的数据。但我没有得到正确的对齐方式。我尝试为每列设置col-xx。结果仍然有些不正确。下面是我显示列表数据的代码：

<ion-card>
  <ion-card-header>
    <div class="row">
      <div class="col col-center"><strong>Room No.</strong></div>
      <div class="col col-center"><strong>Date</strong></div>
      <div class="col col-center"><strong>Start</strong></div>
      <div class="col col-center"><strong>End</strong></div>
      <div class="col col-center"><strong>Can't make it?</strong></div>
      <!--<div class="col"><strong>User</strong></div>-->
    </div>
  </ion-card-header>
  <ion-list>
    <ion-item collection-repeat="reservation in ownReservedRoomsList">
      <ion-card>
        <div class="row">
          <div class="col col-center">{{reservation.Room_ID}}</div>
          <div class="col col-center">{{reservation.Dt}}</div>
          <div class="col col-center">{{reservation.StartTime}}</div>
          <div class="col col-center">{{reservation.EndTime}}</div>
          <!--<div class="col">{{room.Login_ID}}</div>-->
          <div class="col col-center">
            <button class="button button-small icon-left ion-trash-a button-assertive"
                    ng-click="cancelReservation(reservation._id)">
              Cancel
            </button>
          </div>
        </div>
      </ion-card>
    </ion-item>
  </ion-list>
</ion-card>

在上面的代码中，ownReservedRoomsList是包含记录的列表。

以下是我得到的输出：

还有其他更好的方法可以在离子或任何CSS中显示列表数据，使collection-repeat的输出更美观吗？