如何选择< p：dataTable>通过CSS？ [英] How to select the <p:dataTable> by CSS?

问题描述

首先我使用< h：dataTable> ，我可以这样做，但之后我需要一些更多的功能，所以我开始使用Primefaces并使用它的< p：dataTable> 。一切顺利，但我在桌子上应用的CSS停止了唤醒。然后我发现< p：dataTable> 首先创建一个< div> 然后在code>< div> ，它正在创建一个< table> 。

First I was using <h:dataTable> and I was OK with this but after then I needed some more functionality, So I started using Primefaces and used its <p:dataTable>. Everything is going fine but the CSS that I applied on tables stopped woking. Then I found that <p:dataTable> is first creating a <div> and then inside the <div>, it is creating a <table>.

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

但是< h：dataTable> 只是HTML < table> 。现在我想知道如何获取表的id或有什么解决方案，我可以访问该表。我也想知道为什么< h：dataTable> 和< p：dataTable>

But <h:dataTable> creates just HTML <table>. Now I want to know how can I get table's id or is there any solution that I can access that table. I also want to know that Why <h:dataTable> and <p:dataTable> differs from each other.

推荐答案

如果要以通用方式对表进行样式，只需相应地更改CSS选择器。 < table> < p：dataTable> 可以由 datatable class。

If you want to style tables in a generic manner, just change the CSS selectors accordingly. The <table> of <p:dataTable> is selectable by the ui-datatable class.

.ui-datatable td {
    background: pink;
}

如果您只想以特定方式仅对特定表进行风格，它是一个类名，以便您可以通过类名而不是ID来选择。

If you want to style only a specific table in a specific manner, rather give it a classname so that you can select by the classname instead of by ID.

例如

<p:dataTable styleClass="foo">

可以被 .ui-datatable.foo {} 。例如

is overrideable by .ui-datatable.foo {}. E.g.

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

这篇关于如何选择&lt; p：dataTable&gt;通过CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！