如何從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; 
}