Primefaces开发：panelGrid间无法隐藏的边框问题求助

我之前也碰到过PrimeFaces的PanelGrid边框顽固残留的情况，试过inline样式却不管用，给你几个亲测有效的解决思路：

1. 先修正样式语法错误 #

看你代码里的border- width: 0px多了个空格，正确写法是border-width: 0px，空格会导致CSS属性无效，这可能是部分边框没消失的直接原因之一。

2. 用高优先级CSS覆盖默认样式 #

PrimeFaces的PanelGrid自带.ui-panelgrid、.ui-panelgrid-cell这些默认类，inline样式很容易被它们覆盖。建议自定义一个CSS类，统一应用到所有PanelGrid组件上：

首先在页面的<h:head>里添加自定义样式（或者放到全局CSS文件中）：

/* 处理PrimeFaces的panelGrid */
.no-border-panelgrid, .no-border-panelgrid .ui-panelgrid-cell {
    border: none !important;
    border-collapse: collapse !important;
}
/* 同时处理JSF原生的h:panelGrid */
.no-border-hpanelgrid, .no-border-hpanelgrid td {
    border: none !important;
    border-collapse: collapse !important;
}

然后修改你的xhtml代码，给所有panelGrid加上对应的styleClass：

<!-- 外层PrimeFaces panelGrid -->
<p:panelGrid columns="2" styleClass="no-border-panelgrid">
    <!-- 嵌套的PrimeFaces panelGrid -->
    <p:panelGrid columns="1" cellspacing="2" cellpadding="5" styleClass="no-border-panelgrid">
        <h1>#{lbl['entretien.annuel.personnel.organisation.commerciale']}</h1>
    </p:panelGrid>
    <!-- JSF原生h:panelGrid -->
    <h:panelGrid columns="2" cellspacing="2" cellpadding="5" styleClass="no-border-hpanelgrid">
        <!-- 内部表单元素 -->
    </h:panelGrid>
</p:panelGrid>

3. 用浏览器开发者工具精准定位残留边框 #

如果还是有边框没消失，按F12打开浏览器开发者工具，找到那个带边框的元素，切换到「Styles」标签，查看哪个CSS规则在控制这个边框（会标注规则来源），然后针对性地用!important或更具体的选择器覆盖。比如有时候是.ui-panelgrid-row的边框没被处理，那就把这个类也加到自定义CSS里。

4. 简化嵌套结构（可选） #

你页面里嵌套了多层PanelGrid，其实可以把部分嵌套的PanelGrid换成<h:panelGroup>，减少不必要的table元素，从根源上避免嵌套带来的边框冲突问题。

内容的提问来源于stack exchange，提问作者Hassan Jroundi