mat-table修改列宽

要修改mat-table中列的宽度，可以使用CSS属性`flex`。具体步骤如下：

1. 在HTML中，对应列的mat-header-cell元素和mat-cell元素中添加一个class，例如`custom-column`：

<ng-container matColumnDef="name">
  <th mat-header-cell *matHeaderCellDef class="custom-column"> Name </th>
  <td mat-cell *matCellDef="let element" class="custom-column"> {{element.name}} </td>
</ng-container>

2. 在CSS中添加以下代码，将`custom-column`类的flex属性设为所需的宽度，例如200px：

.custom-column {
  flex: 0 0 200px;
  max-width: 200px;
}

这将使所有使用`custom-column`类的列的宽度都为200px。如果只想修改单个列的宽度，可以为该列的`mat-header-cell`和`mat-cell`元素分别添加不同的class，然后在CSS中分别设置宽度。

注意：mat-table是基于flexbox的布局，因此在修改列宽度时应注意其他列的大小和位置，以避免布局问题。

相关问题

mat-table中设置.mat-cell.mat-column-name无效

在mat-table中设置.mat-cell.mat-column-name无效可能有以下原因：

1. 检查mat-table中的列定义是否正确。确保每个列都有一个名字，例如：

   <ng-container matColumnDef="name">
     <th mat-header-cell *matHeaderCellDef> Name </th>
     <td mat-cell *matCellDef="let element"> {{element.name}} </td>
   </ng-container>

2. 确保在CSS中正确设置.mat-cell.mat-column-name的样式。例如：

   .mat-cell.mat-column-name {
     color: red;
   }

3. 确保在表格中使用的版本与您正在使用的版本兼容。如果您正在使用旧版本的Angular Material，请尝试升级到最新版本。

如果仍然无法解决问题，请提供更多的代码和错误信息，以便我更好地帮助您。

nz-date-picker修改图标为<mat-icon>access_time</mat-icon>

要将 nz-date-picker 的图标修改为 `<mat-icon>access_time</mat-icon>`，需要使用 `nzRenderExtraFooter` 属性来自定义底部内容。具体步骤如下：

1. 在组件中定义一个变量来存储图标的 HTML 代码，例如：

   iconHtml = '<mat-icon>access_time</mat-icon>';

2. 在 nz-date-picker 中使用 `nzRenderExtraFooter` 属性来自定义底部内容，并将变量插入到底部内容中，例如：

   <nz-date-picker nzRenderExtraFooter>
     <ng-template #nzExtraFooter>
       {{ iconHtml }}
     </ng-template>
   </nz-date-picker>

注意，这里使用了 `ng-template` 来定义底部内容，并使用 `#nzExtraFooter` 来引用这个模板。

3. 根据需要，可以使用 CSS 来调整图标的样式，例如：

   ::ng-deep .ant-picker-suffix .anticon {
     display: none;
   }

   ::ng-deep .ant-picker-suffix .mat-icon {
     font-size: 16px;
     color: #1890ff;
   }

这里使用了 `::ng-deep` 来穿透组件的样式封装，然后将默认图标隐藏，将新图标的颜色和大小调整为适合的值。注意，`::ng-deep` 并不是最佳实践，请根据实际情况选择合适的方式来调整样式。

完成上述步骤后，就可以将 nz-date-picker 的图标修改为 `<mat-icon>access_time</mat-icon>` 了。