如何在不使用p:row和p:column的情况下设置PrimeFaces PanelGrid特定单元格样式

针对你遇到的需求——在不使用p:row和p:column的前提下，动态隐藏PanelGrid单元格内容并移除对应<td>的内边距与边框，提供以下几种可行方案：

方案1：动态绑定columnClasses属性 #

利用EL表达式根据显示条件切换列样式类，适合整行隐藏的场景：

步骤1：定义CSS样式 #

.hidden-cell {
    padding: 0 !important;
    border: none !important;
}

步骤2：修改PanelGrid代码 #

<p:panelGrid columns="2" 
             columnClasses="#{usuario22.writingGridOtraPaginaVisible ? 'xs-width-fit-content,xs-width-100' : 'hidden-cell,hidden-cell'}" 
             styleClass="xs-width-100">
    <!-- 你的panelGroup内容 -->
    <h:panelGroup id="otraPaginaPanelDetalleWritingLabelGroup" style="#{usuario22.writingGridOtraPaginaVisible ? 'visibility: visible' : 'display: none'}">
        ...
    </h:panelGroup>
    <h:panelGroup id="otraPaginaPanelDetalleWritingFieldGroup" style="#{usuario22.writingGridOtraPaginaVisible ? 'visibility: visible' : 'display: none'}">
        ...
    </h:panelGroup>
    ...
</p:panelGrid>

当writingGridOtraPaginaVisible为false时，整行的两个列都会应用hidden-cell样式，移除内边距和边框。

方案2：JavaScript动态修改TD样式 #

通过JS定位隐藏的panelGroup，找到其父<td>并修改样式，适合更灵活的单元格控制场景：

步骤1：定义CSS样式 #

.hidden-cell {
    padding: 0 !important;
    border: none !important;
}

步骤2：添加JS处理逻辑 #

<!-- 在AJAX更新后执行，或页面加载时执行 -->
<p:ajax ... oncomplete="adjustHiddenCells()" />

<script>
function adjustHiddenCells() {
    // 定位所有隐藏的panelGroup，找到对应的TD并添加样式
    $('#otraPaginaPanelDetalleWritingLabelGroup:hidden, #otraPaginaPanelDetalleWritingFieldGroup:hidden')
        .closest('td')
        .addClass('hidden-cell');
}

// 页面初始化时执行一次
$(document).ready(adjustHiddenCells);
</script>

方案3：CSS子元素选择器（需现代浏览器支持） #

利用CSS的:has()选择器直接匹配包含隐藏内容的<td>，无需JS：

/* 匹配包含隐藏内容的td */
td:has([style*="display: none"]) {
    padding: 0 !important;
    border: none !important;
}

该样式会自动找到包含display: none内容的<td>，直接移除其边框和内边距。

内容的提问来源于stack exchange，提问作者Jorge Campins