Make table in Ionic


#1

i want to display data in table. so i make many row and class col. what i got is that the data follow the window but it looks not good.

pic:

code:
<ion-view view-title="Riwayat"> <ion-content> <ion-list> <div class="row"> <div class="col" style="border: solid 2px grey;">No</div> <div class="col" style="border: solid 2px grey;">Nama</div> <div class="col" style="border: solid 2px grey;">Lapangan</div> <div class="col" style="border: solid 2px grey;">Jam</div> <div class="col" style="border: solid 2px grey;">Tanggal</div> <div class="col" style="border: solid 2px grey;">Status Bayar</div> <div class="col" style="border: solid 2px grey;">Total Bayar</div> </div> <div class="row" ng-repeat="riwayat in riwayat"> <div class="col" style="border: solid 1px grey;">{{riwayat.no}}</div> <div class="col" style="border: solid 1px grey;">{{riwayat.nama}}</div> <div class="col" style="border: solid 1px grey;">{{riwayat.nama_sub}}</div> <div class="col" style="border: solid 1px grey;">{{riwayat.jam_mulai}} s/d {{riwayat.jam_akhir}}</div> <div class="col" style="border: solid 1px grey;">{{riwayat.tgl_booking}}</div> <div class="col" style="border: solid 1px grey;">{{riwayat.status_bayar}}</div> <div class="col" style="border: solid 1px grey;">{{riwayat.total_bayar}}</div> </div> </ion-list> </ion-content> </ion-view>

is there any option to make it better? thank you :slight_smile: