Md-table - Как обновить ширину столбца

Ответ 1

Когда материал создает таблицу, он автоматически применяет для вас два типа имен, которые вы можете использовать для стилирования каждого столбца. В приведенном ниже примере стили называются 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;
}

Как и ответ Рахул Патил, но вам не нужно добавлять другой класс в определения столбцов.

Ответ 2

В настоящий момент он еще не был показан на уровне 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-table использует flex, нам нужно дать фиксированную ширину в flex. Это просто объясняет -

0 = не растут (сокращение для гибкого роста)

0 = не сжиматься (сокращенно сжимается)

75px = начать с 75px (стенография для flex-основы)

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

Ответ 3

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

 <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;
}

Ответ 4

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

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

Ответ 5

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

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

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

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

Ответ 6

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

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

для его компонента таблицы, чтобы изменить ширину столбца. Опять же, userId будет именем ячейки.

Ответ 7

Я использую 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-->

> Узнайте больше о FlexLayout и @MediaQueries по адресу https://github.com/angular/flex-layout/wiki/Responsive-API.

Ответ 8

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

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

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

td, th {
  width: 25%;
}

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

Ответ 9

Вы можете установить класс .mat-cell для flex: 0 0 200px; вместо flex: 1 вместе с nth-child.

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

Ответ 10

Теперь вы можете сделать это так:

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

Ответ 11

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

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

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

Ответ 12

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

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

Ответ 13

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

<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>

Ответ 14

Вы должны использовать 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>

Ответ 15

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