How to make css columns into primeng?

Question

I'm working with primeng. I have this code to display my data.

My Html:

 <p-table #table [columns]="cols" [value]="list" [paginator]="true"  responsive="false">
            <!---------------- Header of datatable event ------------------>
            <ng-template pTemplate="colgroup" let-columns>
                <colgroup>
                    <col *ngFor="let col of columns" [ngStyle]="{'width' : col.width}">
                </colgroup>
            </ng-template>
            <ng-template pTemplate="header" let-columns>
                <tr>
                    <th *ngFor="let col of columns">
                        {{ col.header | translate}}
                    </th>
                </tr>
            </ng-template>
            <!---------------- Body of datatable event ------------------>
            <ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
                <tr [pSelectableRow]="rowData">
                    <td *ngFor="let col of columns" [ngStyle]="{'width': col.width }">
                        <div *ngIf="col.field !== 'idOption'">
                            {{rowData[col.field]}}
                        </div>
                        <div *ngIf="col.field === 'idOption'">
                            {{rowData[col.field]}}
                            <span *ngIf="rowData.activeOpt">
                                <em class="fa fa-lg fa-check-circle" style="color: green; padding-left: 50%"></em>
                            </span>
                            <span *ngIf="!rowData.activeOpt">
                                <em class="fa fa-lg fa-check-circle" style="color: red; padding-left: 40%"></em>
                            </span>
                        </div>
                    </td>
                </tr>
            </ng-template>
        </p-table>

I get this result:

I want that the green fa-check-circle will be in the same line, really i spent many time without any solution. Thanks for any help.

Answer 1

The reason why icons are not aligned is because icon is placed just after the text & the length of text will vary based on the Garantie values.

So in order to keep our icons aligned irrespective of the text length, we can fix the alignment to always right [float:right] (not after the text ends).

Please change your active & inactive icon code line with below.

Active icon (green):

<em class="fa fa-lg fa-check-circle" style="color: green; float:right"></em>

Inactive icon (red):

<em class="fa fa-lg fa-check-circle" style="color: red; float:right"></em>