md-table-如何更新列宽 [英] md-table - How to update the column width

问题描述

我已经开始在项目中使用md表，并且希望固定列宽.当前，所有列的宽度均分为相等的大小.

I have started using the md-table for my project, and I want fixed column width. Currently all columns width are divided into equal size.

在哪里可以获得数据表维的文档?

Where can I get the documentation of data table dimensions?

https://material.angular.io/components/table/overview

推荐答案

当Material创建表时，它会自动为您应用两个类名，您可以使用它们来为各列设置样式. 在下面的示例中，样式分别命名为mat-column-userId和cdk-column-userId.

When Material creates the table it automagically applies two class-names for you which you can use to style each column. In the the example below the styles is named mat-column-userId and cdk-column-userId.

<ng-container cdkColumnDef="userId">
  <md-header-cell *cdkHeaderCellDef> ID </md-header-cell>
  <md-cell *cdkCellDef="let row"> {{row.id}} </md-cell>
</ng-container>

现在您可以在CSS中使用这些名称:

Now you can use those names in css:

.mat-column-userId {
  flex: 0 0 100px;
}

类似于 Rahul Patil的答案，但您无需在列定义中添加其他类.

Similar to Rahul Patil's answer, but you don't need to add another class to your column definitions.

这篇关于md-table-如何更新列宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！