mat-table修改列宽
时间: 2023-08-09 17:04:18 浏览: 194
改变table的列宽度
5星 · 资源好评率100%
要修改mat-table中列的宽度,可以使用CSS属性`flex`。具体步骤如下:
1. 在HTML中,对应列的mat-header-cell元素和mat-cell元素中添加一个class,例如`custom-column`:
```html
<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:
```css
.custom-column {
flex: 0 0 200px;
max-width: 200px;
}
```
这将使所有使用`custom-column`类的列的宽度都为200px。如果只想修改单个列的宽度,可以为该列的`mat-header-cell`和`mat-cell`元素分别添加不同的class,然后在CSS中分别设置宽度。
注意:mat-table是基于flexbox的布局,因此在修改列宽度时应注意其他列的大小和位置,以避免布局问题。
阅读全文