如何从p：panelGrid中的p：row中删除特定（底部）边框？

Question

我只需要删除<p:row>在<p:panelGrid>中显示的底部边框。我尝试了以下。

CSS：

.panelgrid-cell-noborder.ui-panelgrid .ui-panelgrid-cell { 
    border-bottom: none; 
} 

XHTML：

<p:panelGrid style="width: 100%;"> 
    <p:row> 
     <p:column>a</p:column> 
     <p:column>b</p:column> 
    </p:row> 

    <p:row> 
     <p:column styleClass="panelgrid-cell-noborder">c</p:column> 
     <p:column styleClass="panelgrid-cell-noborder">d</p:column> 
    </p:row> 

    <p:row> 
     <p:column>e</p:column> 
     <p:column>f</p:column> 
    </p:row> 
</p:panelGrid> 

从中间一排的下边框有望被删除，但事实并非如此。

如何从中间行中删除底部边框，在这个例子中？

Answer 1

每个单元都有边界在这种情况下，在默认情况下，所以你应该取消下边框与下方的排的上边框：

XHTML：

<p:panelGrid style="width: 100%;"> 
    <p:row> 
     <p:column>a</p:column> 
     <p:column>b</p:column> 
    </p:row> 

    <p:row> 
     <p:column styleClass="panelgrid-cell-noborder-bottom">c</p:column> 
     <p:column styleClass="panelgrid-cell-noborder-bottom">d</p:column> 
    </p:row> 

    <p:row> 
     <p:column styleClass="panelgrid-cell-noborder-top">e</p:column> 
     <p:column styleClass="panelgrid-cell-noborder-top">f</p:column> 
    </p:row> 
</p:panelGrid> 

CSS：

.ui-panelgrid .ui-panelgrid-cell.panelgrid-cell-noborder-bottom { 
    border-bottom: none; 
} 
.ui-panelgrid .ui-panelgrid-cell.panelgrid-cell-noborder-top { 
    border-top: none; 
} 

另外，你的CSS不正确，你把ui-panelgrid和单元格样式放在一起，检查我的例子。

编辑：

你可能必须覆盖的主题风格了，如果你在默认情况下有他们，因为有两个主题和风格primefaces定义的边界，你可以尝试添加此例如：

/* cancel border defined in aristo theme */ 
.ui-panelgrid .ui-widget-content{ 
    border: none; 
} 
/* extra: you can add this if you want to recover the same color you cancelled above */ 
.ui-panelgrid .ui-panelgrid-cell { 
    border: 1px solid #a8a8a8; 
}