我有一个外部<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>
答案 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 ;
}