如何阻止ng-zorro表格内的nz-select组件宽度自动撑开？

问题分析 #

设置表格列宽为25%后，多选长文本选项时列被撑开，本质是Ng-Zorro表格默认使用自适应布局(auto)，会根据单元格内容自动调整列宽，忽略预设的nzWidth比例。

解决方案 #

1. 开启表格固定布局

给<nz-table>添加nzTableLayout="fixed"属性，强制表格使用固定布局模式，此时列宽会严格遵循nzWidth设置的比例，不会随内容变化而调整。

修改后的表格标签：

<nz-table #basicTable [nzData]="listOfData" nzTableLayout="fixed">

2. 处理多选标签的溢出问题

开启固定布局后，列宽被固定，但长文本的多选标签可能会超出单元格范围，需要添加样式限制：

在组件的CSS文件中加入以下样式（二选一即可）：

/* 方案1：让多选标签文本超出时自动省略 */
::ng-deep .ant-select-multiple .ant-select-selection-item {
  max-width: calc(100% - 40px); /* 预留删除按钮的宽度 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 方案2：让多选标签文本换行显示 */
/* ::ng-deep .ant-select-multiple .ant-select-selection-item {
  white-space: normal;
  word-break: break-all;
} */

完整HTML代码 #

<nz-table #basicTable [nzData]="listOfData" nzTableLayout="fixed">
  <thead>
    <tr>
      <th nzWidth="25%" >Name</th>
      <th nzWidth="25%">Age</th>
      <th nzWidth="25%">Color <br> (Choose 3)</th>
      <th nzWidth="25%">Action</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of basicTable.data">
      <td>{{ data.name }}</td>
      <td>{{ data.age }}</td>
      <td>
        <nz-select style="width: 100%" nzMode="multiple" nzPlaceHolder="Select Colors">
          <nz-option *ngFor="let option of colorOption" [nzLabel]="option" [nzValue]="option">
          </nz-option>
        </nz-select>
      </td>
      <td>
        <a>Delete</a>
      </td>
    </tr>
  </tbody>
</nz-table>

效果说明 #

• 固定布局开启后，所有列将稳定保持25%的宽度，不会被内容撑开。
• 多选标签的样式处理保证了长文本不会破坏布局，同时保留内容可读性。

内容的提问来源于stack exchange，提问作者Foody