我有一个外衣<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>
最佳答案
要将样式规则应用于 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 ;
}
关于css - p :panelGrid inside p:panelGrid, 如何删除外部 p :panelGrid? 中的边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29059960/