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

我很难从特定的PrimeFaces中删除边框

但是

---

不起作用。

边框是在生成的

tr

和

td

元素上设置的，而不是在

表上设置的。因此，这应该做到：

.companyHeaderGrid.ui panelgrid>*>tr，
.companyHeaderGrid.ui-panelgrid.ui panelgrid单元格{
边界：无；
}

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


另见：





如果您仍然使用PrimeFaces 4或更高版本，请改用以下选项：

.companyHeaderGrid.ui panelgrid>*>tr，
.companyHeaderGrid.ui panelgrid>*>tr>td{
边界：无；
}
如果BalusC答案无效，请尝试以下方法：

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

这对我很有用：

.ui-panelgrid td, .ui-panelgrid tr
{
    border-style: none !important
}
.ui panelgrid td、.ui panelgrid tr
{
边框样式：无！重要
}
只需在自定义css mycss.css上添加这些行

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

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

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

请也试试这个


如果在列之间找到一行，则使用以下代码

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


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

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

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



对于其他元素来说，丑陋的“！important”是不必要的，但对于边框来说，只要使用它就可以了。
正如BalusC所提到的，边框是由生成的
tr
和
td
元素上的素数面设置的，而不是在
表上设置的。但是，当尝试使用PrimeFaces版本5时，PrimeFaces CSS
.ui panelgrid.ui panelgrid cell>solid
中似乎有一个更具体的匹配项，这仍然会导致在应用建议的样式时显示黑色边框

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

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

如前所述，确保您的CSS是正确的。
试试看

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

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

<p:panelGrid >

</p:panelGrid>



致：



这对我来说很好
对我来说，只有以下代码有效

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

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

.noBorder tr{
边框宽度：0；
}
.ui-panelgrid-td{
边框宽度：0
}
我正在使用Primefaces 6.0，为了从我的面板网格中删除边框，我使用以下样式类“ui noborder”：

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



它在primefaces库中使用了一个名为“components”的css文件，对于传统主题以及所有现代主题，它没有边框，请应用以下内容：

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


.ui panelgrid、.ui panelgrid td、.ui panelgrid tr、.ui panelgrid tbody tr td
{
边界：没有！重要；
边框样式：无！重要；
边框宽度：0px！重要；
}
我将panelgrid放在datatable中，因此我的工作解决方案是

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

为了

。。。
在primefaces中，theme.css将包含以下代码，只需将styleClass指定为
“ui面板网格空白”。因此，这将删除panelGrid组件的边框

.ui-panelgrid.ui-panelgrid-blank {
  border: 0 none;
  background: none;
}

<p:panelGrid columns="2" layout="grid" styleClass="ui-panelgrid-blank">
</p:panelGrid>

.ui-panelgrid.ui-panelgrid-blank{
边界：0无；
背景：无；
}
这仅适用于在PrimeFaces one之后未加载您自己的CSS的情况，这确实是一个常见的入门错误。
！重要信息
声明实际上是一种解决方法，而不是解决方案。有关更多详细信息，请参见。您还可以添加以下内容来覆盖primefaces样式：.companyHeaderGrid tr、.companyHeaderGrid td{border:none！important；}@JohnB:the
！重要信息
如果您正确地获得了CSS加载顺序，则不需要这样做：请参见下面Andi的答案和我的评论。如果存在解决方案，请不要使用变通方法。使用
！重要信息
仅作为真正的解决方案（即，当您需要通过CSS选择器声明覆盖硬编码的
style=“…”
）。谢谢，这是我的工作，但要删除所有边框，我必须修改为“.companyHeaderGrid.ui-panelgrid.companyHeaderGrid.ui-panelgrid>*>tr.companyHeaderGrid.ui-panelgrid>*>tr>td{边界：无！重要}“Please add explanationBalus”的答案已经过时。请看这一条：@Andrew我认为这不是一个好答案。@PaulWasilewski我认为是的。我更喜欢这个答案，因为它坚持CSS框架。似乎不存在于PF的引导主题中。如果下一个PF版本不再提供样式类或ch会发生什么anges the class？@Andrew我想你一定是新来的。有很多css类随着时间的推移被引入、更改和消失；）没错。但是因为你是新来的，你不明白这是你在PF中编写代码的方式。没有完美的解决方案，你必须接受它，并一直使用非理想的解决方案。这同样非常好就爱国阵线而言。
<h:panelGrid border="0">

</h:panelGrid>

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

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

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

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

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

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

.ui-panelgrid.ui-panelgrid-blank {
  border: 0 none;
  background: none;
}

<p:panelGrid columns="2" layout="grid" styleClass="ui-panelgrid-blank">
</p:panelGrid>