hide primefaces table column header

问题

I have a p:treeTable and the tree contents are all in one column. The tree is a shared component so some of my pages require column header and and some don't. In the pages where the columnHeader is empty, it creates the an empty row for the column header, which I don't want. I do want the column contents, just not the header when there is no column header.

How can I fix this? Any pointers/ideas would be great. Thanks!

回答1:

You can solved that with custom CSS by setting the thead display attribute to none:

Example:

div[id="testForm:first"] thead {
    display:none;
}

if your JSF is similar to this:

<h:form id="testForm">
    <p:dataTable id="first">
        ...
    <p:/dataTable>
</h:form>

回答2:

If your <p:dataTable> uses columns widths like this

<p:dataTable styleClass="myTable">
   <p:column width="100">

and you use the following CSS to hide the column headers

.myTable thead {
    display:none;
}

you will also lose the column widths you set

Solution to hide column header and keep column widths

.myTable thead th { 
    border: none !important; 
    background: none !important; 
}

回答3:

A more formal solution:

TAG:

<p:treeTable styleClass="tree-table-no-header">

Style:

.tree-table-no-header thead {
    display: none;
}

回答4:

You may find you need to be more specific with your style selector:

 div[id$="myTableId"]>div>table>thead { display:none; }

This also eliminates the need to reference your form id. The '$' is a starts with wild card and the '>' says select only direct children. See http://www.w3schools.com/cssref/css_selectors.asp for a really good CSS Selector reference.

回答5:

Hide header (same as other answers):

.hide-table-header thead {
    display: none;
}

... and specify column width:

<p:dataTable styleClass="hide-table-header">
        <p:column style="width: 80px">

These won't work with reflow="true" tables.

For me the border:none, background:none suggestion leaves an empty space above the table and hides the left side border of the table as well.

回答6:

Add this code to your css3 file

** Remove the header from the dataTable**/
.ui-datatable.borderless thead {
  display: none;
}

/** Remove the border from the dataTable **/
.ui-datatable.borderless tbody,
.ui-datatable.borderless tbody tr,
.ui-datatable.borderless tbody td {
    border-style: none;
    }

Then call this code from the xhtml file like this :

<p:dataTable styleClass="borderless">

来源：https://stackoverflow.com/questions/12809250/hide-primefaces-table-column-header

标签

primefaces

hide

treetable

columnheader