Geek Answers Handbook

Apply CSS to a specific p: dataTable component, not all p: dataTable components

I have several data types in the request form. I want to remove the border for all data except one. I used the style below to remove the border. Could you tell me how I can get only one data type with borders. At the moment, it removes the border for all data types.

.ui-datatable .ui-datatable-data td, .ui-datatable .ui-datatable-data-empty td { border-style: none; }
+6
source share
1 answer

Give the table in question a specific class of styles:

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

So 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 also expanded the selector and enabled tr , it also has a border by default, your initial selector only removes the vertical border between columns, not the horizontal border between rows)

See also:

+9
source

More articles:


All Articles