css - 如何选择 <p :dataTable> by CSS?

Question

首先我使用的是 <h:dataTable>我对此很满意，但之后我需要更多功能，所以我开始使用 Primefaces 并使用它的 <p:dataTable> .一切正常，但我在表格上应用的 CSS 停止运行。然后我发现 <p:dataTable>首先创建一个 <div>然后在 <div> 里面, 它正在创建一个 <table> .

 <div id="tcform:tclist" .......>
       <table role="grid">....</table>
 </div>

但是<h:dataTable>只创建 HTML <table> .现在我想知道如何获取表的 ID 或者是否有任何可以访问该表的解​​决方案。我也想知道为什么 <h:dataTable>和 <p:dataTable>各不相同。

Answer 1

如果您想以通用方式设置表格样式，只需相应地更改 CSS 选择器即可。 <table>的 <p:dataTable>可以通过 ui-datatable 选择类。

.ui-datatable td {
    background: pink;
}

如果您只想以特定方式设置特定表格的样式，请为其指定一个类名，以便您可以按类名而不是按 ID 选择。

例如

<p:dataTable styleClass="foo">

可被 .ui-datatable.foo {} 覆盖.例如

.ui-datatable.foo td {
    background: hotpink;
}