angular ng-zorro中nz-table-table表格添加滚动条,表格错位

问题:

表格固定表头,增加滚动条,导致表格内列头和内容错位angular ng-zorro中nz-table-table表格添加滚动条,表格错位_第1张图片

解决办法

指定th的nzWidth属性

<nz-table [nzData]="targetData" [nzFrontPagination]="false"
                              [nzShowPagination]="false"
                              [nzScroll]="{ y: '500px' }">
                        <thead>
                        <tr>
                            <th nzWidth="60px">序号th>
                            <th nzWidth="160px">工序描述th>
                            <th nzWidth="110px">标准工时(分钟)th>
                            <th nzWidth="110px">工序级别th>
                            <th nzWidth="110px">标准工价(元)th>
                            <th nzWidth="90px" *ngIf="editable">操作th>
                        tr>
                        thead>
                        <tbody>
                            <tr *ngFor="let data of targetData; index as i" cdkDrag>
                                <td>{{ i+1 }}td>
                                <td>{{ data.desc }}td>
                                <td>{{ data.sam }}td>
                                <td>{{ data.grade }}td>
                                <td>{{ data.price }}td>
                                <td *ngIf="editable">
                                    <button nz-button nzType="link" (click.stop)="delete(i)">删除button>
                                td>
                            tr>
                        tbody>
                    nz-table>

修改后:angular ng-zorro中nz-table-table表格添加滚动条,表格错位_第2张图片

你可能感兴趣的:(ng-zorro,前端)