jsf - How to select the <p:dataTable> by CSS?

Question

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>

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.

Answer 1

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;
}

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.

E.g.

<p:dataTable styleClass="foo">

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

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