css - 如何更改 p-dataTable 边框底部颜色？

Question

当您进行选择时，PrimeNG 不允许我为 p-dataTable 更改 bottom-border-color。

我试图从 HTML 中获取元素，但它不起作用，而且他们网站上的文档在样式方面很差。

我想在样式表中进行此更改。

<p-dataTable  #paperTable [custom-filters]="customFilters" id="tableId" 
scrollHeight="80%"scrollable="true" [pageLinks]="3" [value]="dataGrid"
selectionMode="single" [paginator]="true" [rowsPerPageOptions]="[25,50,100]" 
[rows]="25" [responsive]="true">
   <p-column  field="id" header="Id" [sortable]="true" [editable]="true" [hidden] = "true">
   </p-column>
</p-dataTable>

Answer 1

PrimeNG 的DataTable 组件具有tableStyleClass 属性，可用于将CSS 类添加到表格中，例如:

.red-bottom-border {
    border-bottom: 3px solid red;
}

然后在你的模板中:

<p-dataTable  #paperTable [custom-filters]="customFilters" id="tableId"
scrollHeight="80%" scrollable="true" [pageLinks]="3" [value]="dataGrid"
selectionMode="single" [paginator]="true" [rowsPerPageOptions]="[25,50,100]" 
[rows]="25" [responsive]="true" tableStyleClass="red-bottom-border">

您可以找到 DataTable 组件的所有属性列表 here .

这是工作 Plunker .