How do I support scrolling and lock/freeze the header row of a pageBlockTable?

Question

The following example code adds a scrollbar around the table if the number of items results in a table that has a height that is greater than 500px.

<apex:outputPanel layout="block" style="overflow:auto; height:500px;" rendered="{!items.size > 0}">
    <apex:pageBlockTable value="{!items}" var="item" columns="3" width="100%">

        <apex:column headerValue="Name">
            <apex:outputText value="{!item.Name}"/>
        </apex:column> 

        <apex:column headerValue="Count">
            <apex:outputText value="{!item.Count__c}"/>
        </apex:column> 

        <apex:column headerValue="Unit Price">
            <apex:outputText value="{!item.Unit_Price__c}"/>
        </apex:column> 

    </apex:pageBlockTable>
</apex:outputPanel>

The issue is that the table header is inside of the scrolling apex:outputpanel, so as soon as the user scrolls down the header row goes away. I would like the header row to stay locked/frozen in place.

Is there a setting on the pageBlockTable or some other component that I'm just missing to do this or some other way?

Thanks.

Answer 1

I don't believe this is a function provided by Visualforce, however you can probably create the effect you are looking for using CSS and jQuery. I did a search for 'jquery fixed table header' and found lots of plugins, I'm sure one of these could be customized.

Answer 2

You can do this purely with CSS which means you may be able to do it with styleClass attributes on your pageBlockTable. If not, you'll have to use a regular HTML table and a repeat element. Here's the link: Pure CSS Scrollable Table With Fixed Header Row