How to set rules to none in p:panelGrid?

Question

Unlike <h:panelGrid> , <p:panelGrid> has no option like rules . All rules appear between cells in <p:panelGrid> , by default. For example,

<p:panelGrid style="table-layout: fixed; width: 100%; word-wrap: break-word;">
    <f:facet name="header">
        <p:row>
            <p:column colspan="3">
                <h:outputText value="Header"/>
            </p:column>
        </p:row>
    </f:facet>

    <p:row>
        <p:column>1</p:column>
        <p:column>2</p:column>
        <p:column>3</p:column>
    </p:row>

    <p:row>
        <p:column>1</p:column>
        <p:column>2</p:column>
        <p:column>3</p:column>
    </p:row>

</p:panelGrid>

will display a grid layout as follows.

How to remove these lines (horizontal & vertical) between cells something like an HTML table <table rules="none"> ?

Answer 1

You can use the following CSS

.ui-panelgrid tr,.ui-panelgrid .ui-panelgrid-cell {
   border: none;       
}