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

问题描述

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

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;
}

但是

.companyHeaderGrid {
    border: none;
}

不起作用.

推荐答案

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

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;
}

我是怎么找到的?只需在 Chrome 的 webdeveloper 工具集中检查生成的 HTML 输出和所有 CSS 样式规则(右键单击，Inspect Element 或按 F12).Firebug 和 IE9 具有类似的工具集.至于混淆，请记住 JSF/Facelets 最终会生成 HTML，并且 CSS 仅适用于 HTML 标记，而不适用于 JSF 源代码.因此，要应用/微调 CSS，您需要查看客户端(网络浏览器)端.

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.

• 如何覆盖默认的 PrimeFaces CSS自定义样式?
• 从所有 PrimeFaces p:panelGrid 组件中移除边框莉>

如果您仍在使用 PrimeFaces 4 或更旧版本，请改用以下代码:

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屋！