如何从特定的 PrimeFaces p:panelGrid 中删除边框？答案

【问题标题】：How to remove border from specific PrimeFaces p:panelGrid?如何从特定的 PrimeFaces p:panelGrid 中删除边框？
【发布时间】：2012-05-12 09:21:11
【问题描述】：

我很难从特定 PrimeFaces <p:panelGrid> 移除边框。

<p:panelGrid styleClass="companyHeaderGrid">
    <p:row>
        <p:column>
            Some tags
        </p:column>
        <p:column>
            Some tags
        </p:column>
    </p:row>
</p:panelGrid>

我已经能够从单元格中删除边框：

.companyHeaderGrid td {
    border: none;
}

但是

.companyHeaderGrid {
    border: none;
}

不起作用。

【问题讨论】：

Balus 的回答已经过时了。看到这个：stackoverflow.com/a/41585497/1599699
@Andrew 我认为这不是一个好的答案。
@PaulWasilewski 我认为是。

标签： css jsf primefaces facelets

【解决方案1】：

在 primefaces 中，theme.css 将有以下代码，我们只需要将 styleClass 指定为 'ui-panelgrid-blank'。所以这将删除 panelGrid 组件的边框。

.ui-panelgrid.ui-panelgrid-blank {
  border: 0 none;
  background: none;
}

<p:panelGrid columns="2" layout="grid" styleClass="ui-panelgrid-blank">
</p:panelGrid>

【讨论】：

【解决方案2】：

现在，Primefaces 5.x 在 panelGrid 中有一个名为“columnClasses”的属性。

.no-border {
    border-style: hidden !important ; /* or none */
}

所以，对于一个有 2 列的 panelGrid，重复两次 css 类。

<p:panelGrid columns="2" columnClasses="no-border, no-border">

对于其他元素，丑陋的“！important”不是必需的，但对于我来说，只要有它的边框就可以了。

【讨论】：

【解决方案3】：

我将面板网格放在数据表中，因此我的工作解决方案是

.ui-datatable-scrollable-body .myStyleClass tbody td{border:none;}

为

<h:panelGrid  styleClass="myStyleClass" >...</h:panelGrid>

【讨论】：

【解决方案4】：

对于没有边界的传统以及所有现代主题，请应用以下内容；

<!--No Border on PanelGrid-->
    <h:outputStylesheet>
        .ui-panelgrid, .ui-panelgrid td, .ui-panelgrid tr, .ui-panelgrid tbody tr td
        {
            border: none !important;
            border-style: none !important;
            border-width: 0px !important;
        }
    </h:outputStylesheet>

【讨论】：

【解决方案5】：

我正在使用 Primefaces 6.0，为了从我的面板网格中删除边框，我使用了这个样式类“ui-noborder”，如下所示：

<p:panelGrid columns="3" styleClass="ui-noborder">
   <!--panel grid contents -->
</p:panelGrid>

它在 primefaces lib 中使用名为“components”的 css 文件

【讨论】：

我更喜欢这个解决方案，因为它坚持使用 CSS 框架。
PF 的引导主题中似乎不存在？
如果下一个 PF 版本不再提供样式类或更改类会怎样？
@Andrew 我想你一定是新手。随着时间的推移，有许多 CSS 类被引入、改变和消失；）
没错。但是因为你是新手，所以你不明白这是你在 PF 中编码的方式。没有完美的解决方案，你必须接受它并一直使用非理想的解决方案。就 PF 而言，这非常好。

【解决方案6】：

对我来说只有以下代码有效

.noBorder tr {
border-width: 0 ;
}
.ui-panelgrid td{
    border-width: 0
}

<p:panelGrid id="userFormFields" columns="2" styleClass="noBorder" >
</p:panelGrid>

【讨论】：

【解决方案7】：

如果你只是想要更简单的东西，你可以改变：

<p:panelGrid >

</p:panelGrid>

到：

<h:panelGrid border="0">

</h:panelGrid>

这对我来说很好用

【讨论】：

【解决方案8】：

试试

<p:panelGrid styleClass="ui-noborder">

【讨论】：

请补充说明

【解决方案9】：

边框是在生成的tr 和td 元素上设置的，而不是在table 上设置的。所以，应该这样做：

.companyHeaderGrid.ui-panelgrid>*>tr,
.companyHeaderGrid.ui-panelgrid .ui-panelgrid-cell {
    border: none;
}

我是怎么找到的？只需在 Chrome 的 webdeveloper 工具集中检查生成的 HTML 输出和所有 CSS 样式规则（右键单击，Inspect Element 或按 F12）。 Firebug 和 IE9 有类似的工具集。至于混淆，请记住 JSF/Facelets 最终会生成 HTML，而 CSS 仅适用于 HTML 标记，而不适用于 JSF 源代码。因此，要应用/微调 CSS，您需要查看客户端（网络浏览器）端。

另见：

如果您仍在使用 PrimeFaces 4 或更早版本，请改用以下内容：

.companyHeaderGrid.ui-panelgrid>*>tr,
.companyHeaderGrid.ui-panelgrid>*>tr>td {
    border: none;
}

【讨论】：

您可以添加以下内容来覆盖 primefaces 样式： .companyHeaderGrid tr, .companyHeaderGrid td { border: none !important; }
@JohnB：如果你的 CSS 加载顺序正确，!important 是不必要的：stackoverflow.com/questions/8768317/… 另请参阅下面 Andi 的答案和我的评论。如果存在解决方案，请勿使用变通方法。仅将 !important 用作真正的解决方案（即，当您需要通过 CSS 选择器声明覆盖硬编码的 style="..." 时）。
谢谢，工作对我来说，但要删除所有边框，我必须修改为 ' .companyHeaderGrid.ui-panelgrid, .companyHeaderGrid.ui-panelgrid>*>tr, .companyHeaderGrid.ui-panelgrid> *>tr>td { 边框：无 !important } '

【解决方案10】：

正如 BalusC 所述，PrimeFaces 在生成的tr 和td 元素上设置边框，而不是在table 上。然而，当尝试使用 PrimeFaces 版本 5 时，似乎 PrimeFaces CSS .ui-panelgrid .ui-panelgrid-cell > solid 有更具体的匹配，在应用建议的样式时仍会显示黑色边框。

尝试使用以下样式以覆盖 Primefaces 而不使用 !important 声明：

.companyHeaderGrid tr, .companyHeaderGrid td.ui-panelgrid-cell {
    border: none;
}

请确保您的 CSS 为 loaded after the PrimeFaces one。

【讨论】：

【解决方案11】：

如果您在列之间找到一条线，请使用以下代码，

.panelNoBorder, .panelNoBorder tr, .panelNoBorder td{
border: hidden;
border-color: white;
}

我使用 Primefaces 5.1 进行了检查

<h:head>
     <title>Login Page</title>    
     <h:outputStylesheet library="css" name="common.css"/>
</h:head> 

<p:panelGrid id="loginPanel" columns="3" styleClass="panelNoBorder">
<p:outputLabel value="Username"/> <p:inputText id="loginTextUsername"/>
<p:outputLabel value="Password"/> <p:password id="loginPassword"/>
<p:commandButton id="loginButtonLogin" value="Login"/> <p:commandButton id="loginButtonClear" value="Clear"/>
</p:panelGrid>

【讨论】：

【解决方案12】：

请也试试这个

.ui-panelgrid tr, .ui-panelgrid td {
border:0 !important;
}

【讨论】：

【解决方案13】：

使用下面的样式修改来删除 Primefaces 单选按钮的边框

.ui-selectoneradio td, .ui-selectoneradio tr
{
    border-style: none !important
}

【讨论】：

【解决方案14】：

只需在您的自定义 css mycss.css 中添加这些行

table tbody .ui-widget-content {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 0 solid #FFFFFF;
    color: #333333;
}

【讨论】：

【解决方案15】：

这对我有用：

.ui-panelgrid td，.ui-panelgrid tr { 边框样式：无！重要 }

【讨论】：

【解决方案16】：

如果 BalusC 的答案不起作用，试试这个：

.companyHeaderGrid td {
     border-style: hidden !important;
}

【讨论】：

这仅适用于您自己的 CSS 在 PrimeFaces 之后没有加载的情况，这确实是初学者的常见错误。 !important 声明实际上是一种解决方法，而不是解决方案。更多详细信息，另请参阅stackoverflow.com/questions/8768317/…