Remove border from all PrimeFaces p:panelGrid components

Question

I need to hide all borders of all panelgrids using primefaces. I have tried he following without effects:

table {
    border: none;
}

table tr, table td {
    border: none;
}

What can I do?

Answer 1

You need to be at least as specific as the PrimeFaces default selector.

.ui-panelgrid>*>tr,
.ui-panelgrid .ui-panelgrid-cell {
    border: none;
}

Do not use !important unless you need to override a hardcoded style on a HTML element.

See also:

• How to remove border from specific PrimeFaces p:panelGrid?
• How do I override default PrimeFaces CSS with custom styles?

Answer 2

This solution affect only panelGrids but dataTables:

.ui-panelgrid > * > tr, .ui-panelgrid > * > tr > td.ui-panelgrid-cell {
    border: none;
}

Thanks to the answer published by Kukeltje here: Remove all border on all panelgrids not on datatables

Answer 3

It may be that your CSS is overwritten somewhere else. You could try using the !important rule.

table, table tr, table td {
   border: none !important;
}

Answer 4

Tested on primefaces 5.1

.ui-widget-content {
border: none;
}

Answer 5

This work in Primefaces 5

.ui-panelgrid-content {
    border: none;
}