如何将css列变成primeng？

Question

我正在使用 primeng。我有这个代码来显示我的数据。

我的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>

我得到这个结果：

我希望绿色的fa-check-circle在同一行，真的我花了很多时间没有任何解决方案。感谢您的帮助。

Answer 1

图标未对齐的原因是图标紧跟在文本之后，文本的长度会根据 Garantie 值而变化。

因此，为了使我们的图标无论文本长度如何都保持对齐，我们可以将对齐方式固定为始终右对齐 [float:right]（而不是在文本结束后）。

请使用以下代码更改您的活动和非活动图标代码行。

活动图标（绿色）：

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

非活动图标（红色）：

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

如何将css列变成primeng？

How to make css columns into primeng?

css

primeng

angular8