p:panelGrid里面的p:panelGrid,如何删除外部p:panelGrid中的边框?

时间:2015-03-15 11:12:30

标签: css jsf primefaces

我有一个外部<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>

1 个答案:

答案 0 :(得分:3)

要将样式规则应用于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;
}

或者另一个选项是你可以为内部panelgrid设置边框。

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