如何样式化或删除PrimeNG p-table网格线?

Question

我正在尝试删除或至少更改p-table网格线的颜色。

我试着在浏览器上检查代码，看看我是否能找到创建这些行的元素，但我找不到它。

我尝试对td和tr应用样式，但无法删除网格线。

这里是显示网格线的图像的链接:我试图删除的网格线

使用:角11PrimeNG 11

Answer 1

PrimeNg对td或tr应用border。你的样式没有被应用的一个原因是因为CSS专用性

如果有两个或多个CSS规则指向同一个元素，那么指定值最高的选择器将"胜出"，其样式声明将应用于该HTML元素。

来源:w3schools.com

要更改网格线，需要指定td/tr。在全局styles.scss/styles.css文件中添加这些样式:

.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td{
border:unset;
// border-width:0; This will also work
}

*注意:把这些样式添加到全局样式文件中是很重要的，因为Angular默认封装组件的样式(除非你设置了ViewEncapsulation:none)。如果添加到一个特定的组件，你的样式可能会像这样结束:

.p-datatable.p-datatable-gridlines[_ngcontent-mqq-c93]   .p-datatable-tbody[_ngcontent-mqq-c93]    > tr[_ngcontent-mqq-c93]    > td[_ngcontent-mqq-c93] {

如果它仍然不能解决你的问题，看看p-datatable-gridlines。根据您选择的PrimeNg主题，尝试通过检查元素&识别以td/tr为目标的当前选择器。https://www.primefaces.org/primeng-v11-lts//表/网格线

Answer 2

您可以尝试在CSS中使用::ng-deep伪类来穿透p-table:

的视图封装。

:host ::ng-deep .p-datatable .p-datatable-tbody > tr > td {
border-bottom: none;
}

一定要将它与:host结合使用，但是::host ::ng-deep。这将使样式作用域到你的组件，否则样式将是全局的。

这是一个StackBlitz，我通过app.component.css删除了网格线。

Answer 3

:host ::ng-deep .p-datatable .p-datatable-tbody > tr > td {
border-bottom: none;
}