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

Вы можете сделать это, используя приведенный ниже CSS:

table {
  width: 100%;
  table-layout: fixed;
}

th, td {
  overflow: hidden;
  width: 200px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Вот StackBlitz Example с образцами данных

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

user.component.css

table{
 width: 100%;
}

.mat-column-username {
  word-wrap: break-word !important;
  white-space: unset !important;
  flex: 0 0 28% !important;
  width: 28% !important;
  overflow-wrap: break-word;
  word-wrap: break-word;

  word-break: break-word;

  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.mat-column-emailid {
  word-wrap: break-word !important;
  white-space: unset !important;
  flex: 0 0 25% !important;
  width: 25% !important;
  overflow-wrap: break-word;
  word-wrap: break-word;

  word-break: break-word;

  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.mat-column-contactno {
  word-wrap: break-word !important;
  white-space: unset !important;
  flex: 0 0 17% !important;
  width: 17% !important;
  overflow-wrap: break-word;
  word-wrap: break-word;

  word-break: break-word;

  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.mat-column-userimage {
  word-wrap: break-word !important;
  white-space: unset !important;
  flex: 0 0 8% !important;
  width: 8% !important;
  overflow-wrap: break-word;
  word-wrap: break-word;

  word-break: break-word;

  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.mat-column-userActivity {
  word-wrap: break-word !important;
  white-space: unset !important;
  flex: 0 0 10% !important;
  width: 10% !important;
  overflow-wrap: break-word;
  word-wrap: break-word;

  word-break: break-word;

  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

Если вы используете scss для своих стилей, вы можете использовать миксин, чтобы помочь сгенерировать код. Ваши стили быстро выйдут из-под контроля, если каждый раз выставлять все свойства.

Это очень простой пример - на самом деле не более чем доказательство концепции, вы можете расширить его с помощью нескольких свойств и правил по мере необходимости.

    @mixin mat-table-columns($columns)
    {
        .mat-column-
        {
            @each $colName, $props in $columns {
    
                $width: map-get($props, 'width');
                
                &#{$colName} 
                {
                    flex: $width;
                    min-width: $width;
    
                    @if map-has-key($props, 'color') 
                    {
                        color: map-get($props, 'color');
                    }
                }  
            }
        }
    }

Затем в вашем компоненте, где определена ваша таблица, вы просто делаете это:

    @include mat-table-columns((
    
        orderid: (width: 6rem, color: gray),
        date: (width: 9rem),
        items: (width: 20rem)
    
    ));

Это генерирует что-то вроде этого:

    .mat-column-orderid[_ngcontent-c15] {
      flex: 6rem;
      min-width: 6rem;
      color: gray; }
    
    .mat-column-date[_ngcontent-c15] {
      flex: 9rem;
      min-width: 9rem; }

В этой версии width становится flex: value; min-width: value.

Для вашего конкретного примера вы можете добавить wrap: true или что-то в этом роде в качестве нового параметра.

мы можем добавить атрибут ширина прямо в th

например:

<ng-container matColumnDef = "position" >
    <th mat-header-cell *matHeaderCellDef width  = "20%"> No. </th>
    <td mat-cell *matCellDef = "let element"> {{element.position}} </td>
  </ng-container>

Вот альтернативный способ решения проблемы:

Вместо того, чтобы пытаться «исправить это в публикации», почему бы вам не обрезать описание до того, как таблица попытается уместить его в свои столбцы? У меня так получилось:

<ng-container matColumnDef = "description">
   <th mat-header-cell *matHeaderCellDef> {{ 'Parts.description' | translate }} </th>
            <td mat-cell *matCellDef = "let element">
                {{(element.description.length > 80) ? ((element.description).slice(0, 80) + '...') : element.description}}
   </td>
</ng-container>

Поэтому я сначала проверяю, больше ли массив определенной длины, если да, то усекаю и добавляю «...», в противном случае передаю значение как есть. Это позволяет нам по-прежнему пользоваться автоматическим интервалом в таблице :)

Как я реализовал, и он работает нормально. вам просто нужно добавить ширину столбца с помощью matColumnDef = "description"

Например :

<mat-table #table [dataSource] = "dataSource" matSortDisableClear>
    <ng-container matColumnDef = "productId">
        <mat-header-cell *matHeaderCellDef>product ID</mat-header-cell>
        <mat-cell *matCellDef = "let product">{{product.id}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef = "productName">
        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
        <mat-cell *matCellDef = "let product">{{product.name}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef = "actions">
        <mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
        <mat-cell *matCellDef = "let product">
            <button (click) = "view(product)">
                <mat-icon>visibility</mat-icon>
            </button>
        </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef = "displayedColumns"></mat-header-row>
    <mat-row *matRowDef = "let row; columns: displayedColumns"></mat-row>
</mat-table>

здесь matColumnDefproductId, productName и action

теперь применяем ширину по matColumnDef

укладка

.mat-column-productId {
    flex: 0 0 10%;
}
.mat-column-productName {
    flex: 0 0 50%;
}

а оставшаяся ширина одинаково распределяется между другими столбцами

Вы легко можете это сделать. В каждом столбце вы получите класс с именем поля с префиксом mat-column, поэтому класс будет похож на mat-column-yourFieldName. Для этого вы можете установить стиль, как показано ниже

.mat-column-yourFieldName {
    flex: none;
    width: 100px;
}

Таким образом, мы можем указать фиксированную ширину столбца в соответствии с нашим требованием.

Надеюсь, это кому-то поможет.

Просто нужно обновить ширину тега th.

th {
  width: 100px;
}

Просто добавьте style = "width:5% !important;" в th и тд

  <ng-container matColumnDef = "username">
    <th style = "width:5% !important;" mat-header-cell *matHeaderCellDef> Full Name </th>
    <td style = "width:5% !important;" mat-cell *matCellDef = "let element"> {{element.username}} ( {{element.usertype}} )</td>
  </ng-container>

Просто добавьте класс full-width-table в таблицу тегов.

например <table mat-table class = "full-width-table" [dataSource] = "dataSource">

Вы можете использовать атрибут fixedLayout = "true", например <table #table mat-table [dataSource] = "dataSource" fixedLayout = "true">

fixedLayout: использовать ли фиксированный макет таблицы. Включение этой опции обеспечит согласованную ширину столбцов и оптимизирует отображение липких стилей для собственных таблиц. Не работает для гибких столов.

введите описание изображения здесьI имел таблицу с четырьмя столбцами. Смотрите скриншот. В scss-файле я включил следующий код:

.full-width-table {
  width: 100%;
}
.mat-column-id {
  width: 15% !important;
}
.mat-column-question {
  width: 55% !important;
}
.mat-column-view {
  width: 15% !important;
}
.mat-column-reply {
  width: 15% !important;
}

Если вы хотите задать фиксированную ширину для определенного столбца, вы можете добавить fxFlex = "60px" как в mat-cell, так и в mat-header-cell.