css - 如何从 p :row in p:panelGrid? 中删除特定(底部)边框

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