Apply CSS on a specific p:dataTable component instead of on all p:dataTable components

Question

I have multiple datatables on the request form. I want to remove the border for all the datatables except for one. I have used the below style to remove the border. Can you please let me know how can I get only one datatable with borders. As of now, it removes the border for all datatables.

.ui-datatable .ui-datatable-data td, .ui-datatable .ui-datatable-data-empty td {
  border-style: none;
}

Solution

Give the table in question a specific style class:

<p:dataTable ... styleClass="borderless">

So that you can use more specific CSS selectors for this:

.ui-datatable.borderless .ui-datatable-data tr,
.ui-datatable.borderless .ui-datatable-data-empty tr,
.ui-datatable.borderless .ui-datatable-data td,
.ui-datatable.borderless .ui-datatable-data-empty td {
    border-style: none;
}

(note that I extended the selector to cover tr as well; it has by default also a border, your initial selector removes only the vertical border between the columns, not the horizontal border between the rows)

See also:

• How do I override default PrimeFaces CSS with custom styles?