如何从特定的PrimeFaces中删除边框p：panelGrid？ [英] How to remove border from specific PrimeFaces p:panelGrid?

问题描述

我无法从特定的PrimeFaces < p：panelGrid> 中移除边框。

 < p：panelGrid styleClass =companyHeaderGrid> 
< p：row> 
< p：column> 
一些标签
< / p：column> 
< p：column> 
一些标签
< / p：column> 
< / p：row> 
< / p：panelGrid> 
  

我已经能够从单元格中删除边框：

  .companyHeaderGrid td {
 border：none; 
} 
  

但

  .companyHeaderGrid {
 border：none; 
} 
  

无效。

tr 和 td 已设置边框。元素，而不是表。所以，这应该做：

  .companyHeaderGrid.ui-panelgrid> *> tr，
 .companyHeaderGrid.ui-panelgrid .ui-panelgrid-cell {
 border：none; 
} 
  

我是如何找到的？只需在Chrome的网络开发工具集中检查生成的HTML输出和所有CSS样式规则（右键，检查元素或按F12）。 Firebug和IE9有类似的工具集。至于混乱，只要记住，JSF / Facelets最终生成HTML，并且CSS只适用于HTML标记，而不适用于JSF源代码。因此，应用/ finetune CSS你需要在客户端（webbrowser）端代替。

另请参阅：

• 如何覆盖默认的PrimeFaces CSS自定义样式？


• 从所有PrimeFaces中移除边框p：panelGrid组件

---

仍然使用PrimeFaces 4或更旧版本，请改用下面的代码：

  .companyHeaderGrid.ui-panelgrid> ; *> tr，
 .companyHeaderGrid.ui-panelgrid> *> tr> td {
 border：none; 
} 
  

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.

解决方案

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

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

See also:

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

---

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

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

这篇关于如何从特定的PrimeFaces中删除边框p：panelGrid？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！