I have a apex:datatable that I am using and I have implemented apex:facets as the headers for each column. I am attempting to allow scrolling for this particular table however I do not want the header to scroll with it. I have searched extensively online and cannot seem to find a solution to this issue.


    .headerFormat {height:30px; position:relative;}

I have tried many things in this CSS (i.e., different position values, top:0px, overflow:hidden). Nothing seems to be doing the trick.

Visualforce Code:

 <div id="id" style="overflow:auto; height:500px;">
    <apex:dataTable value="{!myRows}" var="row" headerClass="headerFormat">
        <apex:column style="width:10%">
            <apex:facet name="header">
            <apex:commandLink action="{!myAction}">
                <apex:param name="myParam" assignTo="{!theParam}" value="0"/>
                 THE HEADER CONTENT
            <apex:outputText value="{!myOutput}"/>

I've tried a number of things here as well (i.e., wrapping the whole facet in a div and the "body" in a separate div). Does anyone have a solution to this issue? Thanks for your time.


1 Answer 1


I ended just breaking the headers out of the facet and put them in their own div. Therefore, I had a div for just the headers that did not scroll and a scrollable table div.

  • 2
    can you give an example of this
    – Andrew
    Jul 13, 2017 at 21:12

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .