1

This question already has an answer here:

I am using apex data table in apex outputpanel. I want to make the header fixed on scrolling. But I am not able to get the result. Here is my code :

<apex:outputPanel styleClass="dataTable" id="tbid">
<h2 class="headerTitle">CA&amp;S Sales Support Proposals</h2>

<div style="overflow: scroll; width: auto; height: 500px;"> 
<apex:datatable value="{!usspt1}" var="Opp" html-cid="accountsTable" id="contacttable" styleclass="display" columnsWidth="1%,1%,4%,3%,3%,4%,2%,2%,2%,2%,2%,2%,2%,2%,2%,3%,3%,28%,19%,3%" >



                  <apex:column headerValue="STS Lead" >
               <apex:outputfield value="{!Opp.STS_Lead__r.Name}" />  
           </apex:column>
            <apex:column headerValue="High Level Summary" >


                 <apex:outputText value="{!left(Opp.High_Level_Summary__c,500)}"   />

           </apex:column>

                <apex:column headerValue="Critical Next Step" >
                <apex:outputText value="{!left(Opp.Critical_Next_Step__c,500)}"   />
           </apex:column>


                 <apex:column headerValue="Key Dates" >
               <apex:outputfield value="{!Opp.Key_Dates__c}" />  
           </apex:column>

Here is my CSS which using for table header.

.dataTable  th{
background: #305492;
border-top: solid 1px #E0E3E5;
border-right: solid 1px #E0E3E5;
color: #fff;
font-size: 1.15em;
font-weight: normal;
padding: 11px 2px 10px 5px;
white-space: normal;
}

marked as duplicate by Santanu Boral, Mohith Shrivastava, martin, Tushar Sharma, Ratan Paul May 4 '17 at 7:07

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

0

Use position:fixed; max-height: 100%; for header div

Ex:

<div style="position: fixed; bottom: 0%; top: 0%;">

    <div style="overflow-y: scroll; height: 100%;">

       <apex:..../>

    </div>

</div>
  • Yes I tried that too. Nothing happened – user44595 May 3 '17 at 15:51
  • You have to put header in separate div tag. Right now, if you add position: fixed in your code, it'll consider whole table as a header. Put data and header in different tags. That might help – Dave May 3 '17 at 15:52
  • <div style="position: fixed"> <apex:column headerValue="STS Lead" > </div> <div> <apex:outputfield value="{!Opp.STS_Lead__r.Name}" /> </apex:column></div> – Dave May 3 '17 at 15:55