如何删除垫选项填充

Question

预期结果应如下所示：

我的数组HTML和CSS看起来像这样

HTML：

$stmt = $con->prepare('SELECT username, rank, id, steamid, avatar FROM users WHERE id="$uid"');

$stmt->bind_param('i', $uid);
$stmt->execute();
$stmt->bind_result($username, $rank, $id, $steamid, $avatar);
$stmt->fetch();
$stmt->close();

CSS：

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

我试图将.mat-option属性更改为padding：无，但它不会影响text div的外部填充。插入的.ng-star和mat-select-content也不起作用。

Answer 1

尝试

.mat-option {
  padding: 0 !important;
}

或

:host .mat-option {
  padding: 0;
}

后者也将样式应用于父元素。