Remove border from all PrimeFaces p:panelGrid components

问题

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?

回答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?

回答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

回答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;
}

回答4:

Tested on primefaces 5.1

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

回答5:

This work in Primefaces 5

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

来源：https://stackoverflow.com/questions/18897664/remove-border-from-all-primefaces-ppanelgrid-components