Remove Border from All Primefaces P:Panelgrid Components

How to remove border from specific PrimeFaces p:panelGrid?

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.

Sample Image

Remove border from all PrimeFaces p:panelGrid components

You need to be at least as specific as the PrimeFaces default selector.

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

Do not use !important unless you need to override a hardcoded style on a HTML element.

p:panelGrid inside p:panelGrid, how to remove borders in an outer p:panelGrid?

To apply style rules to jsf components use styleClass attribute :

 <p:panelGrid id="main-panel" styleClass="outerpanelgrid">
        <p:row>
            <p:column>
                outer table column 1
                        <p:panelGrid styleClass="innerpanelgrid">
                            <p:row>
                                <p:column>
                                    inner table column 1
                                </p:column>
                                <p:column>
                                    inner table column 2
                                </p:column>
                            </p:row>
                        </p:panelGrid>
            </p:column>
            <p:column>
                outer table column 2

            </p:column>
        </p:row>
</p:panelGrid>

Try using following style rule :-

.outerpanelgrid>tbody>tr{
    border: none !important;
}
.outerpanelgrid>tbody>tr>td{
    border: none !important;
}

OR another option is you can set border for inner panelgrid.

 .outerpanelgrid tbody tr, .outerpanelgrid tbody td{  
    border: none;
 }
.innerpanelgrid tbody tr, .innerpanelgrid tbody td{
    border: 1px solid red ;
}

Remove all border on all panelgrids not on datatables

Your CSS selectors are to 'broad'. They influence all <tr> and <td> tags that are descendants of a .ui-panelgrid, including all that are in a table that is in a panelgrid cell as descendants of the table that makes the datatable. So you have to make your selectors more specific (read about css specificity on mozdev) and have them only target a certain level .

Use e.g.

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

This only targets <tr>'s that are a grandchild of a .ui-panelgrid and its direct <td> children.

If you don't want this applied to all panelgrids, You'll have to use the styleClass referred to in a comment above by @BhavinPanchani. But instead of explicitly adding borders by using a class, you prevent the css above to be applied.

.ui-panelgrid:not(.keepBorder) > * > tr, .ui-panelgrid:not(.keepBorder) > * > tr > td.ui-panelgrid-cell {
     border: none;
}

Just add the keepBorder class to the panelGrids that you want to keep the border. I did not test this last thing, but with a little testing you;

See also

Can I write a CSS selector selecting elements NOT having a certain class?

How to remove a specific (bottom) border from p:row in p:panelGrid?

Every cell has border in this case by default, so you should cancel bottom border and top border of the row below:

XHTML:

<p:panelGrid style="width: 100%;">
    <p:row>
        <p:column>a</p:column>
        <p:column>b</p:column>
    </p:row>

    <p:row>
        <p:column styleClass="panelgrid-cell-noborder-bottom">c</p:column>
        <p:column styleClass="panelgrid-cell-noborder-bottom">d</p:column>
    </p:row>

    <p:row>
        <p:column styleClass="panelgrid-cell-noborder-top">e</p:column>
        <p:column styleClass="panelgrid-cell-noborder-top">f</p:column>
    </p:row>
</p:panelGrid>

CSS:

.ui-panelgrid .ui-panelgrid-cell.panelgrid-cell-noborder-bottom {
    border-bottom: none;
}
.ui-panelgrid .ui-panelgrid-cell.panelgrid-cell-noborder-top {
    border-top: none;
}

Also, your CSS was incorrect, you put ui-panelgrid together with the cell style, check that in my example too.

Edit:

You'll probably have to override theme styles too if you have them by default, because there are borders defined in both theme and primefaces styles, you could try adding this for example:

/* cancel border defined in aristo theme */
.ui-panelgrid .ui-widget-content{
    border: none;
}
/* extra: you can add this if you want to recover the same color you cancelled above  */
.ui-panelgrid .ui-panelgrid-cell {
    border: 1px solid #a8a8a8;
}

panelGrid border does not want to be hidden

https://primefaces.github.io/primefaces/8_0/#/components/panelgrid?id=blank-mode

To remove borders add ui-noborder style class to the component using styleClass attribute and to remove borders plus background color, apply ui-panelgrid-blank style.

Issue removing border from one column in primefaces table

Other classes for header and row give borders too, so you have to get rid of them like this (give your panelGrid class noBroder like this <p:panelGrid styleClass="noBorder">)

.noCellBorder, table.noBorder thead tr.ui-widget-header, table.noBorder .ui-panelgrid-even, table.noBorder .ui-panelgrid-odd {
     border: none !important;
}

But is gives black borders for other cells, don't know if you like it.

How to hide/show a row in a panelgrid based on data entered in another row

Cause

The empty row contains padding. The table row and table cell html elements are created by the panelgrid because it renders those for every row and as soon as there some child element a row is rendered. And they have styleclasses on them which are set by the panelgrid and refer to styles which contain padding. The fragments, even if they don't render anything themselves are enough to trigger that.

Remark: We are using the Modena theme from Primefaces. So, the padding is part of the Modena theme.
Extract of the Modena stylesheet which causes the problem:

.ui-panelgrid .ui-panelgrid-cell {
    border-width: 1px;
    border-style: solid;
    border-color: inherit;
    padding: 4px 10px;
}

Solution

I did the following changes:

I explicitly specified rows and columns using primefaces row and column components and added a style class "ui-panelgrid-cell-nopadding" to the columns of the row which I need to hide. I added the style below to my stylesheet so that, that style class removes/overrides padding from that cell which was added by the panelgrid.
.ui-panelgrid .ui-panelgrid-cell-nopadding {
padding: 0px 0px;
}
I added a div around the controls in the cells and applied the class ui-panelgrid-cell to it to add the padding which I removed from the cells.
Remark: I tried a panel first for this, but then it became more complicated because the Primefaces panel also adds styleclasses which caused inconsistent layout with the other rows in my panelgrid (fontsize was changed).
I added a second fragment between the fragments I already had and the div's and I moved the rendered attribute from the controls inside the cells to these fragments. So that the padding defined on the div is no longer there if I don't want the row to be rendered.
One fragment is not enough anymore, because I needed one with an id to be able to update it via ajax and a second with the rendered attribute. If you put those attributes on the same fragment, you can't make it visible anymore as soon as it's hidden. Moving the id's to the explicitly defined columns is also not possible because then these cells behave strangely probably because they are empty when rendering the panelgrid initially. When the cells were updated to make them visible, the content of both the cells of my row appeared in the left cell and the right cell remained empty.
After that, I had a border around the div's because that is specified in the Modena style which I applied to the div's to have the padding that I removed from the cells. And because the content of the div's was smaller than the cell, I had an extra border, I didn't want. So I added something to my stylesheet to remove that border.
.ui-panelgrid .ui-panelgrid-cell-nopadding .ui-panelgrid-cell {
border:none; border:0px;
}

My xhtml now looks like this:

<p:panelGrid id="panel" border="0">
    ...
    <p:row>
        <p:column>
            <h:outputLabel value="Type" />
            <p:selectCheckboxMenu id="deviceTypeMenu" value="#{controller.criteria.dts}" label="All" converter="dtConverter"
        </p:column>
        <p:column>
                filter="true" filterMatchMode="contains"
                panelStyle="width:300px" valueChangeListener="#{controller.onChange}"
                updateLabel="true">
                <p:ajax update="sclabel scfield" />
                <f:selectItems value="#{deviceTypeBean.alldts}" var="dt"
                    itemLabel="#{dt.name}" itemValue="#{dt}"/>
            </p:selectCheckboxMenu>
        </p:column>
    </p:row>
    ...
    <p:row>
        <p:column styleClass="ui-panelgrid-cell-nopadding">
            <p:fragment id="sclabel">
                <p:fragment rendered="#{controller.detailRequired}">
                    <div class="ui-panelgrid-cell">
                        <h:outputText value="Detail"/>
                    </div>
                </p:fragment>
            </p:fragment>
        </p:column>
        <p:column styleClass="ui-panelgrid-cell-nopadding">
            <p:fragment id="scfield">
                <p:fragment rendered="#{controller.detailRequired}">
                    <div class="ui-panelgrid-cell">
                        <p:selectCheckboxMenu converter="#{detailConverter}"
                            value="#{controller.criteria.detail}" label="All details"
                            filter="true" filterMatchMode="contains"
                            style="width:300px;" scrollHeight="100"
                            updateLabel="true">
                            <f:selectItems value="#{detailConverter.values}" var="adetail"
                                itemLabel="#{adetail.name}" itemValue="#{adetail}" />
                        </p:selectCheckboxMenu>
                    </div>
                </p:fragment>
            </p:fragment>
        </p:column>
    <.p:row>
    ...
</p:panelGrid>

Remove all borders on a specific datatable

Assuming a PrimeFaces 3.5 data table which is marked up as follows,

<p:dataTable ... styleClass="borderless">

then this style should do:

.ui-datatable.borderless thead th,
.ui-datatable.borderless tbody,
.ui-datatable.borderless tbody tr,
.ui-datatable.borderless tbody td {
    border-style: none;
}