Comment définir la largeur de tapis de colonne de table dans angulaire?

Ici dans mon mat-tableau de 6 colonnes lors de la colonne n'a pas plus de mots, puis il ressemble à l'Image 1, mais quand toute la colonne a plus de mots, puis de l'INTERFACE utilisateur ressemble à l'Image de-2, de sorte que la façon de définir l'INTERFACE utilisateur comme Image-1 lorsque toute la colonne a plus de mots dans angulaire 6 ?

Image-1

Comment définir la largeur de tapis de colonne de table dans angulaire?

Image-2

Comment définir la largeur de tapis de colonne de table dans angulaire?

user.component.html

<div class="mat-elevation-z8">      
<table mat-table [dataSource]="dataSource">
<ng-container matColumnDef="userimage">
<th mat-header-cell *matHeaderCellDef> # </th>
<td mat-cell *matCellDef="let element"> 
<img src="{{commonUrlObj.commonUrl}}/images/{{element.userimage}}" style="height: 40px;width: 40px;"/>
</td>
</ng-container>
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef> Full Name </th>
<td mat-cell *matCellDef="let element"> {{element.username}} ( {{element.usertype}} )</td>
</ng-container>
<ng-container matColumnDef="emailid">
<th mat-header-cell *matHeaderCellDef> EmailId </th>
<td mat-cell *matCellDef="let element"> {{element.emailid}} </td>
</ng-container>
<ng-container matColumnDef="contactno">
<th mat-header-cell *matHeaderCellDef> Contact No. </th>
<td mat-cell *matCellDef="let element"> {{element.contactno}} </td>
</ng-container>
<ng-container matColumnDef="enabled">
<th mat-header-cell *matHeaderCellDef> Enabled </th>
<td mat-cell *matCellDef="let element" style="color: blue">
<ng-container *ngIf="element.enabled == 'true'; else otherss">Enabled</ng-container>
<ng-template #otherss>Disabled</ng-template>
</td>
</ng-container>
<ng-container matColumnDef="action">
<th mat-header-cell *matHeaderCellDef> Action </th>
<td mat-cell *matCellDef="let element" fxLayoutGap="5px">
<button mat-mini-fab color="primary" routerLink="/base/editUserDetails/{{element.userid}}"><mat-icon>edit</mat-icon></button>
<button mat-mini-fab color="primary" routerLink="/base/viewUserDetails/{{element.userid}}"><mat-icon>pageview</mat-icon></button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20, 50 ,100]" showFirstLastButtons></mat-paginator>

InformationsquelleAutor DDD | 2018-10-27
  1. 11

    à l'aide de css, nous pouvons ajuster la largeur de colonne spécifique que j'ai mis dans le code ci-dessous.

    de l'utilisateur.composante.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;
}
    • Vous devez ajouter ce qui sélecteur de vous ajouter à ces classes pour
    InformationsquelleAutor DDD
  2. 9

    Comme suggéré dans les commentaires, vous pouvez le faire en utilisant le CSS ci-dessous:

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

    Ici est un StackBlitz Exemple avec des exemples de Données

    InformationsquelleAutor Prashant Pimpale
  3. 0

    Si vous utilisez scss pour vos styles, vous pouvez utiliser un mixin pour aider à générer le code. Vos styles de sortir rapidement de la main si vous avez mis toutes les propriétés de tous les temps.

    C'est un exemple très simple, vraiment rien de plus qu'une preuve de concept, vous pouvez l'étendre avec de multiples propriétés et les règles en tant que de besoin.

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

    Puis dans votre composant, votre table est défini, vous faites simplement ceci:

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

    Cela génère quelque chose comme ceci:

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

    Dans cette version width devient flex: value; min-width: value.

    Pour votre exemple, vous pouvez ajouter wrap: true ou quelque chose comme ça comme un nouveau paramètre.

    InformationsquelleAutor Simon_Weaver