p:panelGrid内部的p:panelGrid，如何在外部p:panelGrid中删除边框? [英] p:panelGrid inside p:panelGrid, how to remove borders in an outer p:panelGrid?

问题描述

我有一个外部<p:panelGrid>，我将其用于布局(我知道元素<p:layout>，但无法实现与<p:panelGrid>相同的结果).在此<p:panelGrid>中，我具有各种元素<p:dataTable>，另一个<p:panelGrid>等...

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

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

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.

更新:这是下面的 jsf 代码，并生成了链接 jsfiddle 上的 HTML 代码.

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>

推荐答案

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

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

这篇关于p:panelGrid内部的p:panelGrid，如何在外部p:panelGrid中删除边框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！