Html 如何删除垫选项填充

预期结果应如下所示：

我的数组Html和CSS如下所示

HTML:

我已尝试将.mat option属性更改为padding:none，但它不会影响文本div的外部填充。插入的ng star和mat select内容也不起作用

试试

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

或

---

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

覆盖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;
}

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

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