微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

PrimeNG-如何在单个表的p表中更改pTemplate =“ caption”的样式

如何解决PrimeNG-如何在单个表的p表中更改pTemplate =“ caption”的样式

我只想在一个组件中更改p-table标题单元格的背景颜色,怎么办?

我尝试了<ng-template pTemplate="caption" class="myStyle">

.myStyle{ background: rgb(9,169,121) !important; } 在my.component.scss

但它不起作用。

救救我!谢谢!


编辑:终于可以了!我看到了@Antikhippe的答案,但我不得不添加

:host :: ng-deep { #myTable {
.p-datatable-thead { 背景:红色;
} .p-datatable .p-datatable-thead> tr> th { 背景:继承; } }

解决方法

pTemplate="caption"仅适合表标题的一部分,您必须使用p-datatable-header类:

尝试一下:

:host ::ng-deep {
  #myTable {
    .p-datatable-header {
      background-color: red;
    }
  }
}

我用p-datatable-header包围了#myTable类,以将此CSS仅应用于ID为myTable的表:

<p-table id="myTable" [value]="products">

请参见StackBlitz

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。