How to fix the problem in space of listing data in html?



I have a form with a search in ionic to show it’s result … when search the data show using html

 <div *ngIf="result?.length > 0" class="row header">
                <div class="col">#</div>
                <div class="col" width="50%">Owner</div>
                <div class="col">Door No</div>
                <div class="col"></div>
            <div class="row" *ngFor="let searchdata of result; let i = index">
                <div class="col">{{i + 1}}</div>
                <div class="col" width="50%">{{searchdata.chvOwners}} </div>
                <div class="col">{{searchdata.WardNoDoorNo}}</div>
                <div class="col">
                <button ion-button color="secondary" (click)="showDetails(searchdata.numBuildingID,this.lbid,searchdata.numZoneId,0,4)">

But when show result , there is a size mismatch in display as you see in image

in above image you can see the discrepancy of ‘Owner’ and below name . How to fix this…

my relevant css is

page-property-tax {

    body {
        cursor: url(''), auto;
      .header .col {
      .col {
        border: solid 1px grey;
        border-bottom-style: none;
        border-right-style: none;
      .col:last-child {
        border-right: solid 1px grey;
      .row:last-child .col {
        border-bottom: solid 1px grey;


please advise




The data looks pretty much tabular to me. Why not use a good old html table and style it a bit?


Dear @Sujan12,

I got solution from Max in Pakistan. My worked out solution is

<ion-grid *ngIf="result?.length > 0">
                <ion-col col-1>#</ion-col>
                <ion-col col-6>Owner</ion-col>
                <ion-col col-2>Door No</ion-col>
                <ion-col col-3></ion-col>
            <ion-row *ngFor="let searchdata of result; let i = index">
                <ion-col col-1>{{i + 1}}</ion-col>
                <ion-col col-6>{{searchdata.chvOwners}}</ion-col>
                <ion-col col-2>{{searchdata.WardNoDoorNo}}</ion-col>
                <ion-col col-3 ><button ion-button color="secondary" (click)="showDetails(searchdata.numBuildingID,this.lbid,searchdata.numZoneId,0,4)">