CODEWITHSUNDEEP
angularhtml-tableantdng-zorro-antd
Vamsi
Vamsi

Reputation: 9780

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

Upvotes: 0

Views: 5582

Answers (1)

Hsuan Lee
Hsuan Lee

Reputation: 2330

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

Upvotes: 3

Related Questions