Hide header column header

Question

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

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

Answer 1

You can solve this with custom CSS by setting the display thead attribute to none:

Example:

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

if your JSF is like this:

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

Answer 2

If your <p:dataTable> uses column widths like

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

and you use the following CSS to hide the column headings

 .myTable thead { display:none; } 

you will also lose the column width you set

---

The solution is to hide the column heading and keep the column width

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

Answer 3

A more formal solution:

TAG:

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

Style:

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

Answer 4

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

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

It also eliminates the need for a link to your form id. "$" Starts with a wild card, and ">" selects only direct children. See http://www.w3schools.com/cssref/css_selectors.asp for a really good link for the CSS selector.

Answer 5

Hide title (like other answers):

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

... and specify the column width:

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

They will not work with reflow = "true" tables.

For me, the border: none, background: none suggestion leaves a blank space above the table and also hides the left side of the table.

Answer 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 as follows:

 <p:dataTable styleClass="borderless">