The desired output should resemble this:
https://i.sstatic.net/T1b8t.png
Here is the HTML and CSS code for my array:
HTML:
<ng-container matColumnDef="collaborateurs">
<th mat-header-cell *matHeaderCellDef class="vueListeTh"> Collaborateurs </th>
<td mat-cell *matCellDef="let element" class="vueListeTd">
<mat-select placeholder={{element.collaborateurs[0].nom}} class="collabSelect">
<ng-container *ngFor="let collaborateur of element.collaborateurs">
<mat-option [ngSwitch]="collaborateur.acces">
<div *ngSwitchCase="'COMPLETED'" class="selectCollaborateurCompleted" >
{{collaborateur.nom}}
</div>
<div *ngSwitchCase="'PREVIEW'" class="selectCollaborateurCompleted" >
{{collaborateur.nom}}
</div>
<div *ngSwitchCase="'EDITION'" class="selectCollaborateurEdition" >
{{collaborateur.nom}}
</div>
<div *ngSwitchCase="'WAITING'" class="selectCollaborateurWaiting" >
{{collaborateur.nom}}
</div>
<div *ngSwitchDefault>
{{collaborateur.nom}}
</div>
</mat-option>
</ng-container>
</mat-select>
</td>
</ng-container>
CSS :
.vueListeTh.mat-header-cell, .vueListeTd {
padding: 0px;
text-align: center;
}
.vueListeTh.mat-header-cell:first-of-type,
.vueListeTd.mat-cell:first-of-type {
padding-left: 0px;
}
.vueListeTh.mat-header-cell:last-of-type,
.vueListeTd.mat-cell:last-of-type {
padding-right: 0px;
}
.selectCollaborateurCompleted {
padding-left: 4px;
text-align: left;
width: 100%;
background-color: #8cc83c;
}
.selectCollaborateurEdition {
padding-left: 4px;
text-align: left;
width: 100%;
background-color: #ffff00;
}
.selectCollaborateurWaiting {
padding-left: 4px;
text-align: left;
width: 100%;
background-color: white;
}
I attempted to modify the .mat-option attribute by setting padding to none, however, it did not impact the external padding of the text div. I also tried using .ng-star-inserted and mat-select-content without success.