60

I have difficulty in removing border from a specific 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>

I have been able to remove border from the cells with:

.companyHeaderGrid td {
    border: none;
}

But

.companyHeaderGrid {
    border: none;
}

Does not work.

4

16 回答 16

103

The border is been set on the generated tr and td elements, not on the table. So, this should do:

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

How I found it? Just check the generated HTML output and all CSS style rules in the webdeveloper toolset of Chrome (rightclick, Inspect Element or press F12). Firebug and IE9 have a similar toolset. As to the confusion, just keep in mind that JSF/Facelets ultimately generates HTML and that CSS only applies on the HTML markup, not on the JSF source code. So to apply/finetune CSS you need to look in the client (webbrowser) side instead.

enter image description here

See also:

If you're still on PrimeFaces 4 or older, use below instead:

.companyHeaderGrid.ui-panelgrid>*>tr,
.companyHeaderGrid.ui-panelgrid>*>tr>td {
    border: none;
}
于 2012-05-02T21:00:35.193 回答
46

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

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

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

于 2017-01-11T07:58:18.647 回答
21

这对我有用：

.ui-panelgrid td，.ui-panelgrid tr
{
    边框样式：无！重要
}
于 2013-06-28T15:23:43.243 回答
12

如果 BalusC 答案不起作用，请尝试以下操作：

.companyHeaderGrid td {
     border-style: hidden !important;
}
于 2012-10-25T16:38:21.250 回答
5

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

.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>
于 2014-10-26T17:11:18.717 回答
4

现在，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”不是必需的，但对于我来说，只要有它的边框就可以了。

于 2015-01-30T22:09:36.483 回答
3

尝试

<p:panelGrid styleClass="ui-noborder">
于 2016-03-21T05:58:59.293 回答
0

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

table tbody .ui-widget-content {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 0 solid #FFFFFF;
    color: #333333;
}
于 2013-07-09T10:57:56.000 回答
0

正如 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在 PrimeFaces 之后加载。

于 2015-05-19T08:33:56.097 回答
0

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

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

<p:panelGrid id="userFormFields" columns="2" styleClass="noBorder" >
</p:panelGrid>
于 2016-08-26T16:26:05.583 回答
0

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

<!--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>
于 2017-03-19T09:20:55.757 回答
0

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

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

为了

<h:panelGrid  styleClass="myStyleClass" >...</h:panelGrid>
于 2018-10-23T08:33:35.900 回答
0

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

<p:panelGrid >

</p:panelGrid>

至：

<h:panelGrid border="0">

</h:panelGrid>

这对我来说很好

于 2016-05-09T16:57:42.740 回答
0

在 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>
于 2021-03-25T07:03:40.683 回答
-1

请也试试这个 

.ui-panelgrid tr, .ui-panelgrid td {
border:0 !important;
}
于 2014-06-11T09:48:47.857 回答
-2

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

.ui-selectoneradio td, .ui-selectoneradio tr
{
    border-style: none !important
}
于 2013-08-12T06:16:25.740 回答