function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Mani PenumarthiMani Penumarthi 

Removing pageBlockTable Header

I need to remove the header of the pageblocktable 
<apex:outputpanel id="out1">
                     <div id="target1" style="overflow:scroll; width:100%; height:200px;">
                         <apex:pageBlockTable id="pgtable1" value="{!accounts}" var="account" >
                             <apex:column style="width:350px;">
                                  {!account.name}
                             </apex:column>
                             <apex:column style="width:300px">
                                  {!account.owner.name}
                             </apex:column>
                             <apex:column style="width:300px">
                                  {!account.AccountNumber}
                             </apex:column>
                         </apex:pageBlockTable>
                      </div> 
</apex:outputpanel> 
Navatar_DbSupNavatar_DbSup

Hi,

Try the below code snippet as reference for hiding the header of the page block table:

----------- Vf page----------------

<apex:page id="page" controller="pageblocktablecolumn" >

<apex:form id="frm" >

<apex:tabPanel id="tabpanel1" switchType="client" selectedTab="name2" >

    <apex:tab label="One" name="name1" id="tabOne">

         <apex:pageBlock id="pageblock" >

 

     <apex:pageBlockTable id="pgtable" value="{!con}" var="cc" >

     <Apex:column ><apex:facet name="header">

     <apex:outputPanel ><apex:inputtext /><apex:commandButton value="txt"/></Apex:outputPanel>

     </apex:facet> {!cc.name}</apex:column>

    

  

     </apex:pageBlockTable>

 

 

 </apex:pageBlock>

  

  

    </apex:tab>

    <apex:tab label="Two" name="name2" id="tabTwo">content for tab two</apex:tab>

    </apex:tabPanel>

 

 </Apex:form>

 <Script>

 

var hide= true;

function hideRows(tableId){

var t = document.getElementById(tableId);

var len = t.rows.length;

var rowStyle = (hide)? "none":"";

for(i=1 ; i< len; i++){

t.rows[0].style.display = rowStyle;

}

}

hideRows('page:frm:pageblock:pgtable'); // Pass complete id of the pageblocktable

 

 </script>

</apex:page>

 

--------------- Apex controller-----------------

 

public class pageblocktablecolumn

{

public list<contact> con{get;set;}

 

public pageblocktablecolumn ()

{

    con=[select id, name from contact limit 1000];

}

}

 

Did this answer your question? If not, let me know what didn't work, or if so, please mark it solved. 

Yahor VolkauYahor Volkau
Hello. i had the same problem and this solution works:

<style>               
        .hideTableHeader {
            display: none;
        }
</style>

<apex:pageBlockTable ...... headerClass="hideTableHeader">