Hide border of primefaces without affecting inner data table

Question

How to hide the grid-line(border) of p:panelGrid without affecting the the border of inner data table in primefaces 4.0

Currently using this CSS :

.ui-panelgrid td, .ui-panelgrid tr{
   border-style: none !important
}

which affects both data table and panel grid. But I want only panel grid lines to be hidden.

In my case data table is nested inside panel grid.

Thanks.

You are missing a semicolon change it to the following and try again: .ui-panelgrid tr, .ui-panelgrid td { border:none !important; } — Syed Anas, Apr 01 '14 at 05:17
@anas: No - if it's the last element within a css-class definition you don't have to. But it's best practice to do so. — Nikel Weis, Apr 25 '14 at 14:40
Please visit: [http://stackoverflow.com/questions/10421581/how-to-remove-border-from-primefaces-ppanelgrid][1] for a fix [1]: http://stackoverflow.com/questions/10421581/how-to-remove-border-from-primefaces-ppanelgrid — Abhishek Dhote, Aug 22 '14 at 05:15

score 5 · Answer 1 · answered Apr 25 '14 at 14:39

I know I'm late to party but I just came accross the same problem and fixed it by using a h:panelgrid (standard jsf-library) instead of the primefaces element. There you have the border attribute.

<h:panelGrid border= "0">
 [inner Table - not affected]
</h:panelGrid>

score 4 · Answer 2 · answered Nov 18 '15 at 22:08

4

As of version 5.3 (or earlier)

Blank Mode: To remove borders add ui-noborder style class to the component using styleClass attribute and to remove borders plus background color, apply ui-panelgrid-blank style.

answered Nov 18 '15 at 22:08

K.Nicholas

10,956
4
46
66

Thanks. Works with Primefaces 5.3 – cete3 Mar 11 '16 at 13:35

score 3 · Answer 3 · answered Jul 15 '14 at 04:47

.ui-panelgrid tr, .ui-panelgrid td{
  border:none !important;
}

.ui-datatable .ui-datatable-data tr,.ui-datatable .ui-datatable-data-empty tr,.ui-datatable .ui-datatable-data td,.ui-datatable .ui-datatable-data-empty td{
  border:1px solid !important;
}

score 0 · Answer 4 · answered Jan 13 '14 at 09:42

0

You can use this code in your CSS file:

.ui-panelgrid > tr td, .ui-panelgrid > tr{
   border-style: none !important
 }

answered Jan 13 '14 at 09:42

Saeed

3,415
3
24
41

Hide border of primefaces without affecting inner data table

4 Answers4