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

How to remove border from specific PrimeFaces p:panelGrid?

提问by Eleeist

I have difficulty in removing border from a specific PrimeFaces <p:panelGrid>.

我很难从特定的 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.

不起作用。

回答by BalusC

The border is been set on the generated trand tdelements, not on the table. So, this should do:

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

.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 Elementor 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.

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

See also:

也可以看看：

• How do I override default PrimeFaces CSS with custom styles?
• Remove border from all PrimeFaces p:panelGrid components

• 如何使用自定义样式覆盖默认的 PrimeFaces CSS？
• 从所有 PrimeFaces p:panelGrid 组件中删除边框

---

---

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

如果您仍在使用 PrimeFaces 4 或更旧版本，请改用以下代码：

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

回答by Mr.Q

I am using Primefaces 6.0 and in order to remove borders from my panel grid i use this style class "ui-noborder" as follow:

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

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

It uses a css file named "components" in primefaces lib

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

回答by Mohammed Pasha

This worked for me:

这对我有用：

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

回答by Paul Wasilewski

If BalusC answer doesn't work try this:

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

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

回答by Ajeesh

If you find a line in between the columns then use the below code,

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

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

I checked this with Primefaces 5.1

我用 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>  

回答by Kanjarana

Nowdays, Primefaces 5.x have a attribute in panelGrid named "columnClasses".

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

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

So, to a panelGrid with 2 columns, repeat two times the css class.

因此，对于具有 2 列的 panelGrid，重复两次 css 类。

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

To other elements, the ugly " !important " is not necessary, but to the border just with it work fine to me.

对于其他元素，丑陋的“!important”不是必需的，但是对于边界来说，它对我来说很好用。

回答by spyder man

Try

尝试

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

回答by Edson Cezar

If you just want something more simple, you can just change:

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

<p:panelGrid >

</p:panelGrid>

to:

到：

<h:panelGrid border="0">

</h:panelGrid>

That's worked fine for me

这对我来说很好用

回答by jrabasilio

for me only the following code works

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

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

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

回答by Koekiebox

For the traditional as well as all the modern themes to have no border, apply the following;

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

<!--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>