ngzorro中表格colspan合并

目标效果：

实际效果，可滚动列设置的宽度不起作用 

 

原本代码：其中scrollWid是固定列加上滚动列的宽度，len为滚动多少列（this.scrollWid = 60 + 120 * 3 + 150 + len * 150）,每个th都设置了宽度，但是实现的效果不理想

<nz-table
          #exciseBankTable
          nzBordered
          [nzData]="worktabDatas"
          [nzFrontPagination]="false"
          [nzShowPagination]="false"
          [nzLoadingDelay]="1"
          [nzScroll]="{ x: scrollWid + 'px', y: scrollHei + 'px'}"
        >
          <thead>
          <tr>
            <th nzWidth="60px" nzLeft="0px"  rowspan="2">序号</th>
            <th nzCustomFilter nzWidth="120px" nzLeft="60px"  rowspan="2">姓名
              <nz-dropdown nzTrigger="click" nzPlacement="bottomRight" [nzClickHide]="false" nzTableFilter #dropdown>
                <i
                  nz-icon
                  nzType="search"
                  class="ant-table-filter-icon"
                  [class.ant-table-filter-open]="dropdown.nzVisible"
                  nz-dropdown
                ></i>
                <div class="search-box w12">
                  <input type="text" nz-input placeholder="请输入姓名" #nam/>
                  <button nz-button nzSize="small" nzType="primary" (click)="titleSearch('studentName',nam.value)"
                          class="search-button">
                    搜索
                  </button>
                  <button nz-button nzSize="small" (click)="resetFilter('studentName');nam.value = ''">重置</button>
                </div>
              </nz-dropdown>
            </th>
            <th nzCustomFilter nzWidth="120px" nzLeft="180px"  rowspan="2">学号
              <nz-dropdown nzTrigger="click" nzPlacement="bottomRight" [nzClickHide]="false" nzTableFilter
                           #dropdown>
                <i
                  nz-icon
                  nzType="search"
                  class="ant-table-filter-icon"
                  [class.ant-table-filter-open]="dropdown.nzVisible"
                  nz-dropdown
                ></i>
                <div class="search-box w12">
                  <input type="text" nz-input placeholder="请输入学号" #num/>
                  <button nz-button nzSize="small" nzType="primary" (click)="titleSearch('studentNumber',num.value)"
                          class="search-button">
                    搜索
                  </button>
                  <button nz-button nzSize="small" (click)="resetFilter('studentNumber');num.value = ''">重置</button>
                </div>
              </nz-dropdown>
            </th>
            <th nzCustomFilter nzWidth="150px" nzLeft="300px"  rowspan="2">班级
              <nz-dropdown nzTrigger="click" nzPlacement="bottomRight" [nzClickHide]="false" nzTableFilter
                           #dropdown>
                <i
                  nz-icon
                  nzType="search"
                  class="ant-table-filter-icon"
                  [class.ant-table-filter-open]="dropdown.nzVisible"
                  nz-dropdown
                ></i>
                <div class="search-box w12">
                  <input type="text" nz-input placeholder="请输入班级" #clanam/>
                  <button nz-button nzSize="small" nzType="primary" (click)="titleSearch('className',clanam.value)"
                          class="search-button">
                    搜索
                  </button>
                  <button nz-button nzSize="small" (click)="resetFilter('className');clanam.value = ''">重置</button>
                </div>
              </nz-dropdown>
            </th>
            <th nzWidth="120px" nzLeft="450px"  rowspan="2">小组</th>

            <th *ngFor="let title of worktabHead;" [nzWidth]="title.checks.length * 150 + 'px'" [colSpan]="title.checks.length">{{title.date}}</th>
          </tr>
          <tr>
            <ng-container *ngFor="let trtitle of worktabHead;">
              <th *ngFor="let thtitle of trtitle.checks" nzWidth="150px">
                <span>{{thtitle.checkNumberName}}</span>
              </th>
            </ng-container>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let data of exciseBankTable.data;let k = index;">
            <td nzLeft="0px">{{ (pageInfo.first-1) * pageInfo.rows + k + 1 }}</td>
            <td nzLeft="60px">{{ data.studentName ? data.studentName : '' }}</td>
            <td nzLeft="180px">{{ data.studentNumber ? data.studentNumber : ''}}</td>
            <td nzLeft="300px">{{ data.className ? data.className : ''}}</td>
            <td nzLeft="450px">{{data.groupName ? data.groupName : ''}}</td>
            <ng-container *ngFor="let tds of data.attends">
              <td *ngFor="let list of tds.checks">
                <div>
                  <nz-content *ngFor="let type of attendType">
                    <span *ngIf="type.id === list.status"><img [src]="type.ico" class="icoimg" alt="">{{type.title}}</span>
                  </nz-content>
                </div>
              </td>
            </ng-container>
          </tr>
          </tbody>
        </nz-table>

 经过不断测试修改，最后发现在table标签中先设置宽度，修改后的代码：

// nzWidthConfig关键设置宽度
<nz-table
          #exciseBankTable
          nzBordered
          [nzData]="worktabDatas"
          [nzFrontPagination]="false"
          [nzShowPagination]="false"
          [nzLoadingDelay]="1"
          [nzWidthConfig]="nzWidthConfigs"
          [nzScroll]="{ x: scrollWid + 'px', y: scrollHei + 'px'}"
        >
          <thead>
          <tr>
            <th nzLeft="0px"  rowspan="2">序号</th>
            <th nzCustomFilter nzLeft="60px"  rowspan="2">姓名
              <nz-dropdown nzTrigger="click" nzPlacement="bottomRight" [nzClickHide]="false" nzTableFilter #dropdown>
                <i
                  nz-icon
                  nzType="search"
                  class="ant-table-filter-icon"
                  [class.ant-table-filter-open]="dropdown.nzVisible"
                  nz-dropdown
                ></i>
                <div class="search-box w12">
                  <input type="text" nz-input placeholder="请输入姓名" #nam/>
                  <button nz-button nzSize="small" nzType="primary" (click)="titleSearch('studentName',nam.value)"
                          class="search-button">
                    搜索
                  </button>
                  <button nz-button nzSize="small" (click)="resetFilter('studentName');nam.value = ''">重置</button>
                </div>
              </nz-dropdown>
            </th>
            <th nzCustomFilter nzLeft="180px"  rowspan="2">学号
              <nz-dropdown nzTrigger="click" nzPlacement="bottomRight" [nzClickHide]="false" nzTableFilter
                           #dropdown>
                <i
                  nz-icon
                  nzType="search"
                  class="ant-table-filter-icon"
                  [class.ant-table-filter-open]="dropdown.nzVisible"
                  nz-dropdown
                ></i>
                <div class="search-box w12">
                  <input type="text" nz-input placeholder="请输入学号" #num/>
                  <button nz-button nzSize="small" nzType="primary" (click)="titleSearch('studentNumber',num.value)"
                          class="search-button">
                    搜索
                  </button>
                  <button nz-button nzSize="small" (click)="resetFilter('studentNumber');num.value = ''">重置</button>
                </div>
              </nz-dropdown>
            </th>
            <th nzCustomFilter nzLeft="300px"  rowspan="2">班级
              <nz-dropdown nzTrigger="click" nzPlacement="bottomRight" [nzClickHide]="false" nzTableFilter
                           #dropdown>
                <i
                  nz-icon
                  nzType="search"
                  class="ant-table-filter-icon"
                  [class.ant-table-filter-open]="dropdown.nzVisible"
                  nz-dropdown
                ></i>
                <div class="search-box w12">
                  <input type="text" nz-input placeholder="请输入班级" #clanam/>
                  <button nz-button nzSize="small" nzType="primary" (click)="titleSearch('className',clanam.value)"
                          class="search-button">
                    搜索
                  </button>
                  <button nz-button nzSize="small" (click)="resetFilter('className');clanam.value = ''">重置</button>
                </div>
              </nz-dropdown>
            </th>
            <th nzLeft="450px"  rowspan="2">小组</th>

            <th *ngFor="let title of worktabHead;" [colSpan]="title.checks.length">{{title.date}}</th>
          </tr>
          <tr>
            <ng-container *ngFor="let trtitle of worktabHead;">
              <th *ngFor="let thtitle of trtitle.checks">
                <span>{{thtitle.checkNumberName}}</span>
              </th>
            </ng-container>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let data of exciseBankTable.data;let k = index;">
            <td nzLeft="0px">{{ (pageInfo.first-1) * pageInfo.rows + k + 1 }}</td>
            <td nzLeft="60px">{{ data.studentName ? data.studentName : '' }}</td>
            <td nzLeft="180px">{{ data.studentNumber ? data.studentNumber : ''}}</td>
            <td nzLeft="300px">{{ data.className ? data.className : ''}}</td>
            <td nzLeft="450px">{{data.groupName ? data.groupName : ''}}</td>
            <ng-container *ngFor="let tds of data.attends">
              <td *ngFor="let list of tds.checks">
                <div>
                  <nz-content *ngFor="let type of attendType">
                    <span *ngIf="type.id === list.status"><img [src]="type.ico" class="icoimg" alt="">{{type.title}}</span>
                  </nz-content>
                </div>
              </td>
            </ng-container>
          </tr>
          </tbody>
        </nz-table>

代码中需要的数据格式：

this.worktabHead = [
    {
        "checks": [
            {
                "checkNumber": 1,
                "checkNumberName": "第一次点名",
                "status": 1
            },
            {
                "checkNumber": 2,
                "checkNumberName": "第二次点名",
                "status": 1
            },
            {
                "checkNumber": 3,
                "checkNumberName": "第三次点名",
                "status": 1
            }
        ],
        "date": "2022-08-25星期四上午",
        "id": "4028508182ce482f0182ce5f9a68012f"
    },
    {
        "checks": [
            {
                "checkNumber": 1,
                "checkNumberName": "第一次点名",
                "status": 1
            }
        ],
        "date": "2022-08-25星期四下午",
        "id": "4028508182ce482f0182ce5f9a680131"
    },
    {
        "checks": [
            {
                "checkNumber": 1,
                "checkNumberName": "第一次点名",
                "status": 1
            },
            {
                "checkNumber": 2,
                "checkNumberName": "第二次点名",
                "status": 1
            },
            {
                "checkNumber": 3,
                "checkNumberName": "第三次点名",
                "status": 1
            }
        ],
        "date": "2022-08-30星期二上午",
        "id": "4028508182ce482f0182ce5f9a68013b"
    },
    {
        "checks": [
            {
                "checkNumber": 1,
                "checkNumberName": "第一次点名",
                "status": 1
            }
        ],
        "date": "2022-08-30星期二下午",
        "id": "4028508182ce482f0182ce5f9a68013d"
    }
]

this.worktabDatas = [
    {
        "attends": [
            {
                "checks": [
                    {
                        "checkNumber": 1,
                        "checkNumberName": "第一次点名",
                        "status": 1
                    },
                    {
                        "checkNumber": 2,
                        "checkNumberName": "第二次点名",
                        "status": 1
                    },
                    {
                        "checkNumber": 3,
                        "checkNumberName": "第三次点名",
                        "status": 1
                    }
                ],
                "date": "2022-08-25星期四上午",
                "id": "4028508182ce482f0182ce5f9a68012f"
            },
            {
                "checks": [
                    {
                        "checkNumber": 1,
                        "checkNumberName": "第一次点名",
                        "status": 1
                    }
                ],
                "date": "2022-08-25星期四下午",
                "id": "4028508182ce482f0182ce5f9a680131"
            },
            {
                "checks": [
                    {
                        "checkNumber": 1,
                        "checkNumberName": "第一次点名",
                        "status": 1
                    },
                    {
                        "checkNumber": 2,
                        "checkNumberName": "第二次点名",
                        "status": 1
                    },
                    {
                        "checkNumber": 3,
                        "checkNumberName": "第三次点名",
                        "status": 1
                    }
                ],
                "date": "2022-08-30星期二上午",
                "id": "4028508182ce482f0182ce5f9a68013b"
            },
            {
                "checks": [
                    {
                        "checkNumber": 1,
                        "checkNumberName": "第一次点名",
                        "status": 1
                    }
                ],
                "date": "2022-08-30星期二下午",
                "id": "4028508182ce482f0182ce5f9a68013d"
            }
        ],
        "className": "某某班级",
        "groupId": "4028508182ce482f0182ce5f9a070125",
        "groupName": "第二组",
        "id": "4028508182ce482f0182ce55765b002b",
        "studentId": "40285081824295240182429b93480026",
        "studentName": "杨",
        "studentNumber": "111111111"
    }
]

this.nzWidthConfigs = ['60px', '120px', '120px', '150px', '120px'];
 for (let i = 0; i < len; i++) {
    this.nzWidthConfigs.push(150 + 'px');
 }

this.nzWidthConfigs = [
    "60px",
    "120px",
    "120px",
    "150px",
    "120px",
    "150px",
    "150px",
    "150px",
    "150px",
    "150px",
    "150px",
    "150px",
    "150px"
]

刚开始不知道为什么每个表头设置了宽度不起作用，浪费了很多时间去研究，特此记录。