п:panelGrid внутри П:panelGrid, как убрать границы в наружную п:panelGrid?

У меня есть внешний <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 код ниже, иссылка на сгенерированныйHTML код на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>
1 2
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;
}

Или другой вариант-вы можете установить границу для внутренней panelgrid. 

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