Search code examples
cssjsfjsf-2primefaces

Applying styles to Header in p:datatable

I would like to know how to apply the styles for the header column in the primefaces Datatable. I was able to change the styles for the rows using the rowStyleClass attribute. But not sure, how to change the style for the header columns. A sample example would be really helpful. I have tried the below, but the style for the entire column seems to get changed 

 <p:column id="SelectallID" headerText="Select ID" style="text-align:center; background-color:#C6C3C6;padding:12px;">
 <h:outputText>
 <h:selectBooleanCheckbox id="checkbox2"  value="#{car.selected}"/>
 </h:outputText>
 </p:column>

when I use the above, the entire column style seems to get changed. But I want to change the style for only the header columns. Please Assist. Thanks in Advance.

Solution

  • Primefaces datatable headers generate a html <th> element. You could use an element selector in your style definition:

    th {
  color: red !important;
}

    This will for instance change the font color of all <th> elements on the page.

    If this selection is not specific enough for your purposes, you can combine it with the id of the datatable:

    #review-table th {
  color: red;
}