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 headerValue="High Level Summary" >

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


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

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

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;

1 Answer 1


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


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

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



  • Yes I tried that too. Nothing happened
    – user44595
    May 3, 2017 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, 2017 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, 2017 at 15:55