Когда Материал составляет таблицу, это автоволшебно применяет два имен классов для Вас, которых можно использовать для моделирования каждого столбца. В пример ниже стилей называют mat-column-userId и 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:

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

Подобный ответ Rahul Patil , но Вы не должны добавлять другой класс к своим определениям столбца.

Можно также добавить моделирование непосредственно в разметке, если Вы требуете так:

<ng-container matColumnDef="Edit">
     <th mat-header-cell *matHeaderCellDef > Edit </th>
     <td mat-cell *matCellDef="let element" (click)="openModal()" style="width: 50px;"> <i class="fa fa-pencil" aria-hidden="true"></i> </td>
</ng-container>

Я получил очень легкое решение для этого: установка другой ширины для столбца в таблице стилей путем переопределения и ячейка и ячейка заголовка:

Example: setting custom width for 1st and 5th column:-
.mat-cell:nth-child(1),
.mat-header-cell:nth-child(1),
{
flex: 0 0 5%;
}
.mat-cell:nth-child(5),
.mat-header-cell:nth-child(5),
{
flex: 0 0 10%;
}

github

Можно также использовать селекторы элемента:

mat-header-cell:nth-child(1), mat-cell:nth-child(1) {
    flex: 0 0 64px;
}

, Но ответ jymdman является наиболее рекомендуемым способом пойти в большинстве случаев.

.mat-column-skills {
    max-width: 40px;
}

необходимо использовать fxFlex от "@angular/flex-layout" в th и td как это:

<ng-container matColumnDef="value">
      <th mat-header-cell fxFlex="15%" *matHeaderCellDef>Value</th>
            <td mat-cell *matCellDef="let element" fxFlex="15%" fxLayoutAlign="start center">
                           {{'value'}}
            </td>
</ng-container>

Можно теперь сделать это как это

<cdk-cell [style.flex]="'0 0 75px'">

Если у Вас есть слишком многие столбец таблицы, и он не корректируется в угловой таблице с помощью md-table, то вставьте следующий стиль в component.css файл. Это будет работать как очарование с представлением прокрутки горизонтально.

.mat-table__wrapper .mat-table {
    min-width: auto !important;
    width: 100% !important; }

.mat-header-row {
    width: 100%; }

.mat-row {
    width: 100%;
}

Добавляют этот стиль для изменения столбца отдельно.

.mat-column-{colum-name} {
    flex: 0 0 25% !important;
    min-width: 104px !important;
}

, Кроме того, проверка эта ссылка , (куда код выше прибыл из) , для большего количества детали.

Можно установить класс .mat-ячейки для сгибания: 0 0 200 пкс; вместо гибкого провода: 1 наряду с энным ребенком.

.mat-cell:nth-child(2), .mat-header-cell:nth-child(2) {
    flex: 0 0 200px;
}

Я использую FlexLayout для обновления ширины столбца согласно медиа запроса, которые FlexLayout дает нам.

fxFlex="30" fxFlex.gt-xs="15" fxFlex.gt-sm="20" fxFlex.gt-md="25"

средства, что этот столбец будет использовать 30% ширины строки по умолчанию, когда gt-xs @mediaQuery будет встречен, новая ширина будет 15%-й и подобное поведение для других условий

<!-- CURRENTBALANCE COLUMN-->
  <ng-container cdkColumnDef="balance_2">
    <mat-header-cell fxFlex="30" fxFlex.gt-xs="15" fxFlex.gt-sm="20"
       fxFlex.gt-md="25" fxLayout="row" fxLayoutAlign="center center"
       *cdkHeaderCellDef>{{ balanceTable.datesHeaders[2] }}</mat-header-cell>
    <mat-cell fxFlex="30" fxFlex.gt-xs="15" fxFlex.gt-sm="20" fxFlex.gt-md="25" 
      *cdkCellDef="let eventTop">
      <div fxLayout="column" fxLayoutAlign="center center">
        <!-- CELL_CONTENT-->
      </div>
    </mat-cell>
  </ng-container>
<!-- CURRENTBALANCE COLUMN-->

> Read больше о FlexLayout и @MediaQueries в https://github.com/angular/flex-layout/wiki/Responsive-API

Угловая материальная документация использование

.mat-column-userId {
    max-width: 40px;
}

, чтобы ее компонент таблицы изменил ширину столбца. Снова, идентификатор пользователя был бы именем ячеек.

Я нашел, что комбинация ответов jymdman и Rahul Patil работает лучше всего на меня:

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

кроме того, если у Вас есть один "ведущий" столбец, который Вы хотите всегда занять определенное количество пространства через различные устройства, я нашел, что следующее довольно удобное приняло к доступной контейнерной ширине в более быстро реагирующем виде (это вынуждает остальные столбцы использовать остающееся пространство равномерно):

.mat-column-userName {
  flex: 0 0 60%;
}

Проверьте это: https://github.com/angular/material2/issues/5808

С тех пор material2 использует расположение гибкого провода, можно просто установить fxFlex="40" (или значение, которое Вы хотите для fxFlex) к md-cell и md-header-cell.

Если Вы используете angular/flex-layout в Вашем проекте, можно установить столбец с путем добавления директива fxFlex к матовой ячейке заголовка и матовой ячейке:

 <ng-container matColumnDef="name" >
      <mat-header-cell fxFlex="100px" *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
      <mat-cell  fxFlex="100px" *matCellDef="let row;" (click)="rowClick(row)">{{row.Name}}</mat-cell>
 </ng-container>

Иначе, можно добавить пользовательский CSS для достижения того же результата:

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

Прямо сейчас это еще не было выставлено на уровне API. Однако можно достигнуть его с помощью чего-то подобного этому

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

В CSS, необходимо добавить, что этот пользовательский класс -

.customWidthClass{
   flex: 0 0 75px;
}

Не стесняется вводить логику для добавления класса или пользовательской ширины в здесь. Это применит пользовательскую ширину для столбца.

Начиная с использования md-таблицы flex, мы должны дать зафиксированную ширину способом гибкого провода. Это просто объясняет -

0 =, не растут (сокращение от гибкого провода - растут)

0 =, не уменьшаются (сокращение от уменьшения гибкого провода)

, 75 пкс = запускаются на уровне 75 пкс (сокращение от основания гибкого провода)

Plunkr здесь - https://plnkr.co/edit/v7ww6DhJ6zCaPyQhPRE8? p=preview

Я просто использовал:

th:nth-child(4) {
    width: 10%;
}

Замена 4 с положением заголовка, для которого необходимо скорректировать ширину. Эти примеры в документации используемый:

td, th {
  width: 25%;
}

, Таким образом, я просто изменил его для получения то, что я хотел.