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

Question

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

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与单元格样式ui-panelgrid一起，在我的示例中也进行了检查。

编辑：

如果默认情况下具有主题样式，那么您可能也必须重写主题样式，因为在主题样式和主字体样式中都定义了边框，您可以尝试添加以下示例：

/* 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;
}