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

Question

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

不行.

Answer 1

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

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

我怎么找到的？只需检查Chrome的webdeveloper工具集中生成的HTML输出和所有CSS样式规则(右键单击,检查元素或按F12).Firebug和IE9有类似的工具集.至于混淆,请记住,JSF/Facelets最终会生成HTML,而CSS只适用于HTML标记,而不适用于JSF源代码.因此,要应用/微调CSS,您需要查看客户端(webbrowser)方面.

也可以看看:

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

如果您仍然使用PrimeFaces 4或更早版本,请使用以下代码:

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

Answer 2

我正在使用Primefaces 6.0,为了从我的面板网格中删除边框,我使用这个样式类"ui-noborder"如下:

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

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

Answer 3

这对我有用:

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

Answer 4

如果BalusC答案不起作用,试试这个:

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

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