How to set the style of specific cells of a PrimeFaces panelGrid with layout=tabular

In GitHub issue PanelGrid: No way to manage style or identifiers of panelgrid cells except for tabular mode #5840, says it is possible to do it but doesn't say how.

I want to "hide" some cells. I have partially solved the problem using p:row and p:column; but those components don't work well inside a p:wizard. So I was wondering if there is another way to do it. Right now, I'm only hiding the cell content, but I'd also like to remove the padding and borders from the generated td.

I will really appreciate if someone can tell me how to set the style of specific cells without using p:row and p:column.

EDITED ON 11/15/22

Following the advice here is some code:

<p:panelGrid
    columns="2"
    columnClasses="xs-width-fit-content,xs-width-100"
    styleClass="xs-width-100">
    ...
    <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>

The p:panelGrid has 2 columns, one for labels, etc, and other for input fields, etc. Each column contains a single h:panelGroup. Each pair of consecutive panelGroups would be a "row"; such "rows" are shown and hidden dynamically using AJAX. When the panelGroups of a "row" are hidden, I would like to change the style of their containing td, to set padding and borders to 0.

Solution

Your question comes down to styling empty cells. You can use the :empty CSS pseudo-class to do so. You want to override the theme rule for panel cells body .ui-panelgrid .ui-panelgrid-cell, so you want to use custom CSS like:

html body .ui-panelgrid .ui-panelgrid-cell:empty {
    // your properties
}

If you want to style certain cells containing certain content, you can use the :has CSS pseudo-class to select those cells. For example:

<p:panelGrid ...>
    <p:column>
        <div class="myClass">
            ...
        </div>
    </p:column>
</p:panelGrid>

html body .ui-panelgrid .ui-panelgrid-cell:has(.myClass) {
    // your properties
}