javascript - 如何使用 ng-material-treetable 更改列宽？

Question

我意识到内部材料data-table正在被使用。当我使用表时mat-table。我可以使用 CSS 进行以下更改，但不知何故它不起作用，我该怎么做？

.mat-column-[columnname] { 
    width: 50% !important;
}

与 stackblitz 上的代码链接： https ://stackblitz.com/edit/angular-xpcm2l?file=src/app/app.component.css

标签： javascriptcssangulartreetable

Answer 1

如果您检查浏览器输出，您会看到列宽是在以下选择器中定义的（参见示例）：

例子：

td[class*=' mat-column'][_ngcontent-c9] {
    width: 10vw;
    min-width: 10vw;
    max-width: 10vw;
}

您应该能够在 scss 文件中根据需要添加和修改此选择器。

td[class*=' mat-column'][_ngcontent-c9]

此选择器会影响表中包含以“mat-column”开头的类并与作为目标并以“_ngcontent-c9”开头的另一个属性组合的每个“td”元素。

你试过这样的递归方法吗？

td[class*=' mat-column'] *
{
  ...
}

这样，您可以完全避免可能由 Angular 动态生成的目标属性。

编辑：

我还建议您避免在 CSS 中使用!important。我不认为这是一个好习惯。