p:panelGrid 在 p:panelGrid 中，如何删除外部 p:panelGrid 中的边框？答案

【问题标题】：p:panelGrid inside p:panelGrid, how to remove borders in an outer p:panelGrid?p:panelGrid 在 p:panelGrid 中，如何删除外部 p:panelGrid 中的边框？
【发布时间】：2015-03-15 11:12:30
【问题描述】：

我有一个外部的<p:panelGrid>，我将它用于布局（我知道元素<p:layout>，但无法获得与<p:panelGrid> 相同的结果）。在这个<p:panelGrid> 里面我有各种元素<p:dataTable>，另一个<p:panelGrid>，等等......

我需要删除外部<p:panelGrid> 中的边框，但我所做的一切也会影响内部元素的边框。我试过nth-child(n)，我试过用#form\\:outer-panel-grid tr, #form\\:outer-panel-grid td捕捉特定的边界，什么都没有。每次内部边界也会消失。

也许有人对此问题有有效的解决方案？谢谢。

更新：这是下面的 jsf 代码，link 在 jsfiddle 上生成 HTML 代码。

     <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>

【问题讨论】：

没有代码就帮不上忙了，上传到jsfiddle.net以便有人帮忙
是否只删除最外层<p:panelGrid> 周围的边框？即最外层<p:panelGrid> 内的其他<p:panelGrid>s 周围的边界不应该受到影响——它们应该保持原样吗？ @Rusty：添加 JSFiddle 很困难，因为 HTML 是由服务器端 XHTML 标签呈现的。
@Tiny，没错。 Rusty, Tiny，我已经添加到由 JSF 生成的 jsfiddle 代码中，在底层它是相同的 HTML、CSS、JavaScript。

标签： css jsf primefaces

【解决方案1】：

要将样式规则应用于 jsf 组件，请使用 styleClass 属性：

 <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>

尝试使用以下样式规则：-

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

或者另一个选项是您可以为内部面板网格设置边框。

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

【讨论】：