Puedes hacerlo usando el siguiente CSS:

 table { width: 100%; table-layout: fixed; } th, td { overflow: hidden; width: 200px; text-overflow: ellipsis; white-space: nowrap; }

Aquí hay un StackBlitz Example con datos de muestra

Si está usando scss para sus estilos, puede usar un mixin para ayudar a generar el código. Sus estilos se saldrán de control rápidamente si pone todas las propiedades cada vez.

Este es un ejemplo muy simple: realmente no es más que una prueba de concepto, puede ampliarlo con varias propiedades y reglas según sea necesario.

 @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'); } } } } }

Luego, en su componente donde se define su tabla, simplemente haga esto:

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

Esto genera algo como esto:

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

En esta versión, el width se convierte en flex: value; min-width: value .

Para su ejemplo específico, podría agregar wrap: true o algo así como un nuevo parámetro.

usando css podemos ajustar el ancho de columna específico que puse en el código a continuación.

usuario.componente.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; }

podemos agregar el ancho del atributo directamente a th

p.ej:

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

Aquí hay una forma alternativa de abordar el problema:

En lugar de intentar "arreglarlo en la publicación", ¿por qué no trunca la descripción antes de que la tabla deba intentar encajarla en sus columnas? Lo hice así:

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

Entonces, primero compruebo si la matriz es más grande que una cierta longitud, si es así, la trunco y agrego '...'; de lo contrario, paso el valor tal como está. Esto nos permite seguir beneficiándonos del espaciado automático que hace la tabla :)

Como he implementado, y está funcionando bien. solo necesita agregar el ancho de columna usando matColumnDef="description"

por ejemplo :

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

aquí matColumnDef es productId , productName y action

ahora aplicamos ancho por matColumnDef

estilismo

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

y el ancho restante se asigna igualmente a otras columnas

Debajo de Css Class funcionó en Angular 13.2.3

 .width-textArea { width: 150px; max-width: 150px; word-wrap: break-word; }

La clase debía especificarse tanto en <th como en <Td

 <ng-container matColumnDef="comments"> <th class="width-textArea" mat-header-cell *matHeaderCellDef mat-sort-header class="TableHeaderRow">Comments</th> <td class="width-textArea" mat-cell *matCellDef="let element"> {{element.comments}} </td> </ng-container>

ingrese la descripción de la imagen aquí Tenía una tabla con cuatro columnas. Por favor, vea la captura de pantalla. En el archivo scss, incluí el siguiente código:

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

En caso de que desee dar un ancho fijo a una columna en particular, puede agregar fxFlex="60px" tanto a mat-cell como mat-header-cell .

Solo necesito actualizar el ancho de la etiqueta th .

 th { width: 100px; }

Puedes hacer esto fácilmente. En cada columna, obtendrá una clase con el nombre del campo prefijado con mat-column, por lo que la clase será como mat-column-yourFieldName. Así que para eso puedes configurar el estilo como sigue

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

Entonces podemos dar un ancho fijo para la columna según nuestro requisito.

Espero que esto ayude a alguien.

Puede usar fixedLayout="true" como <table #table mat-table [dataSource]="dataSource" fixedLayout="true">

fixedLayout: si se debe usar un diseño de tabla fijo. Habilitar esta opción impondrá anchos de columna consistentes y optimizará la representación de estilos pegajosos para tablas nativas. No-op para mesas flexibles.

Solo agrega style="width:5% !important;" a th y td

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

Simplemente agregue la full-width-table de etiquetas.

por ejemplo <table mat-table class="full-width-table" [dataSource]="dataSource">