p：panelGrid中的p：panelGrid，如何在外部p：panelGrid中删除边框？

Question

I have an outer <p:panelGrid> and I use it for layout (I know regarding the element <p:layout> but couldn't achieve same results with it as with <p:panelGrid> ). Inside this <p:panelGrid> I have various elements <p:dataTable> , another <p:panelGrid> , etc...

I need to remove borders in an outer <p:panelGrid> but everything I've done affect borders of the internal elements as well. I tried nth-child(n) , I tried catch specific borders with #form\\\\:outer-panel-grid tr, #form\\\\:outer-panel-grid td , nothing. Every time internal borders disappearing as well.

Maybe somebody have a working solution for this issue? Thank you.

UPDATE: This is jsf code below, and link to generated HTML code on jsfiddle .

     <style>
        #form\:main-panel td{
            border: none !important;
        }

        #form\:main-panel tr{
            border: none !important;
        }
    </style>



      <h:form id="form">
        <p:growl id="growl" />
        <p:panelGrid id="main-panel">
            <p:row>
                <p:column>
                    outer table column 1
                            <p:panelGrid>
                                <p:row>
                                    <p:column>
                                        inner table column 1
                                    </p:column>
                                    <p:column>
                                        inner table column 2
                                    </p:column>
                                </p:row>
                            </p:panelGrid>
                </p:column>
                <p:column>
                    outer table column 2

                </p:column>
            </p:row>
        </p:panelGrid>
    </h:form>

Answer 1

To apply style rules to jsf components use styleClass attribute :

 <p:panelGrid id="main-panel" styleClass="outerpanelgrid">
        <p:row>
            <p:column>
                outer table column 1
                        <p:panelGrid styleClass="innerpanelgrid">
                            <p:row>
                                <p:column>
                                    inner table column 1
                                </p:column>
                                <p:column>
                                    inner table column 2
                                </p:column>
                            </p:row>
                        </p:panelGrid>
            </p:column>
            <p:column>
                outer table column 2

            </p:column>
        </p:row>
</p:panelGrid>

Try using following style rule :-

.outerpanelgrid>tbody>tr{
    border: none !important;
}
.outerpanelgrid>tbody>tr>td{
    border: none !important;
}

OR another option is you can set border for inner panelgrid.

 .outerpanelgrid tbody tr, .outerpanelgrid tbody td{  
    border: none;
 }
.innerpanelgrid tbody tr, .innerpanelgrid tbody td{
    border: 1px solid red ;
}