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）端查找。

enter image description here

另见：

如果您仍然使用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>

Answer 6

现在，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”不是必需的，但是对于边框来说，它对我来说很好。

Answer 7

尝试

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

Answer 8

只需在自定义css mycss.css

上添加这些行

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

Answer 9

如BalusC所述，边框由PrimeFaces在生成的tr和td元素上设置，而不是在table上。但是，在尝试使用PrimeFaces版本5时，看起来有一个来自PrimeFaces CSS .ui-panelgrid .ui-panelgrid-cell > solid的更具体的匹配，这仍然会在为建议的样式添加时显示黑色边框。

尝试使用以下样式，以便在不使用!important声明的情况下覆盖Primefaces：

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

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

Answer 10

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

<p:panelGrid >

</p:panelGrid>

为：

<h:panelGrid border="0">

</h:panelGrid>

这对我来说很好用

Answer 11

对我来说只有以下代码可以使用

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

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

Answer 12

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

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

Answer 13

我将panelgrid放在了数据表中，因此我的解决方案是

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

为

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

Answer 14

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

Answer 15

请尝试这个

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

Answer 16

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

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

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

16 个答案:

另见：