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

Question

当你制作 select.

时，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 class 添加到 table，例如：

.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。

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

How can I change a p-dataTable border-bottom color?

css

primeng

angular