Solución:
El borde se establece en el generado tr y td elementos, no en el table. Entonces, esto debería hacer:
.companyHeaderGrid.ui-panelgrid>*>tr,
.companyHeaderGrid.ui-panelgrid .ui-panelgrid-cell {
border: none;
}
¿Cómo lo encontré? Simplemente verifique la salida HTML generada y todas las reglas de estilo CSS en el conjunto de herramientas de desarrollo web de Chrome (haga clic con el botón derecho, Inspeccionar elemento o presione F12). Firebug e IE9 tienen un conjunto de herramientas similar. En cuanto a la confusión, solo tenga en cuenta que JSF / Facelets en última instancia genera HTML y que CSS solo se aplica en el marcado HTML, no en el código fuente JSF. Entonces, para aplicar / ajustar CSS, debe buscar en el lado del cliente (navegador web).
Ver también:
- ¿Cómo anulo el CSS PrimeFaces predeterminado con estilos personalizados?
- Eliminar el borde de todos los componentes PrimeFaces p: panelGrid
Si todavía tiene PrimeFaces 4 o más, use a continuación en su lugar:
.companyHeaderGrid.ui-panelgrid>*>tr,
.companyHeaderGrid.ui-panelgrid>*>tr>td {
border: none;
}
Estoy usando Primefaces 6.0 y para eliminar los bordes de la cuadrícula de mi panel, uso esta clase de estilo “ui-noborder” de la siguiente manera:
<p:panelGrid columns="3" styleClass="ui-noborder">
<!--panel grid contents -->
</p:panelGrid>
Utiliza un archivo css llamado “componentes” en primefaces lib
Esto funcionó para mí:
.ui-panelgrid td, .ui-panelgrid tr
{
border-style: none !important
}