Search code examples
angularhtml-tableantdng-zorro-antd

NZ Zorro, Ant design nz-table dynamic columns does not align

I have a table where columns are dynamically sent by the server. Table headers and the data columns do not align.

How do I make them align? 

<nz-table *ngIf="queryResults" #headerTable [nzData]="queryResults" [nzFrontPagination]="false"
    [nzShowPagination]="false" [nzScroll]="{ y: '150px' }">
    <thead>
      <tr>
        <th *ngFor="let c of queryCols">{{c}}</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let d of headerTable.data">
        <td *ngFor="let c of queryCols">{{ d[c] }}</td>
      </tr>
    </tbody>
  </nz-table>

enter image description here

Solution

  • Need to specify the nzWidth for th when fixing the header in v8.5.x or old.

    We are about to release version 9(stable) and it will adaptive width. now, you can try on https://next.ng.ant.design/components/table/en#components-table-demo-fixed-header