如何从特定的黄金面移除边界p:panelGrid?

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.

不工作。

14 个解决方案

#1

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

边界设置在生成的tr和td元素上，而不是在表上。所以,这应该做的是:

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

我如何找到它呢?只需检查生成的HTML输出和所有CSS样式规则在Chrome的webdeveloper工具集(右击，检查元素或按F12)。Firebug和IE9有相似的工具集。至于混淆，请记住JSF/Facelets最终生成HTML，而CSS只应用于HTML标记，而不是JSF源代码。因此，要使用/finetune CSS，您需要在客户端(web浏览器)中查看。

See also:

• How do I override default PrimeFaces CSS with custom styles?
• 如何用定制的样式覆盖默认的主界面CSS ?
• Remove border from all PrimeFaces p:panelGrid components
• 从所有的黄金面移除边界p:panelGrid组件。

---

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

如果你仍然处于4岁或以上的状态，可以使用下面的方法:

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

#2

This worked for me:

这工作对我来说:

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

#3

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，为了从我的面板网格中移除边框，我使用了这个style类“ui-noborder”如下:

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

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

它使用一个名为“组件”的css文件在“primefaces lib”中。

#4

If BalusC answer doesn't work try this:

如果BalusC的回答不奏效，试试这个:

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

#5

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

我在《黄金版》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>  

#6

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

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

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

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

因此，对于一个具有2列的窗格，重复2次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.

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

#7

Try

试一试

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

#8

Just add those lines on your custom css mycss.css

只需将这些行添加到定制的css mycss.css。

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

#9

As mentioned by BalusC, the border is set by PrimeFaces on the generated tr and td elements, not on the table. However when trying with PrimeFaces version 5, it looks like there is a more specific match from the PrimeFaces CSS .ui-panelgrid .ui-panelgrid-cell > solid which still result in black borders being shown when appyling the style suggested.

如BalusC所提到的，边界是由在生成的tr和td元素上的PrimeFaces设置的，而不是在表上。然而，当你尝试使用“prime face”版本5时，它看起来更像是来自于“prime face”的CSS .ui-panelgrid .ui-panelgrid-cell > solid，它仍然会在appyling建议的时候显示出黑色边框。

Try using following style in order to overide the Primefaces one without using the !important declaration:

试着使用以下的风格，在不使用的情况下，使你的脸看起来更美!

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

As mention make sure your CSS is loaded after the PrimeFaces one.

如前所述，请确保您的CSS是在黄金面之后加载的。

#10

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

这对我来说没问题。

#11

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>

#12

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>

#13

Please try this too

请试试吧

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

#14

Use below style modification to remove border for Primefaces radio button

使用下面的样式修改，以删除边界的黄金脸单选按钮。

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