Apex code to Freeze Cloumns and Header of table

Sample :

• Download latest JQuery package from below link and upload it into static resource in SFDC.

http://www.jeasyui.com/download/index.php

• Create page and controller.

Page : FreezeTable

<apex:page controller="FreezeTableController">

    <apex:stylesheet value="{!URLFOR($Resource.FreezeTable, '/jquery-easyui-1.3.4/themes/default/easyui.css')}"/>

    <apex:stylesheet value="{!URLFOR($Resource.FreezeTable, '/jquery-easyui-1.3.4/themes/icon.css')}"/>

    <apex:includeScript value="{!URLFOR($Resource.FreezeTable, '/jquery-easyui-1.3.4/jquery.min.js')}"/>

    <apex:includeScript value="{!URLFOR($Resource.FreezeTable, '/jquery-easyui-1.3.4/jquery.easyui.min.js')}"/>

    <table class="easyui-datagrid" title="Frozen Columns in DataGrid" style="width:700px;height:250px"

            data-options="rownumbers:true,singleSelect:true">

        <thead data-options="frozen:true">

            <tr>

                <th data-options="field:'itemid',width:100">Item ID</th>

                <th data-options="field:'productid',width:120">Product</th>

            </tr>

        </thead>

        <thead>

            <tr>

                <th data-options="field:'listprice',width:90,align:'right'">List Price</th>

                <th data-options="field:'unitcost',width:90,align:'right'">Unit Cost</th>

                <th data-options="field:'attr1',width:250">Attribute</th>

                <th data-options="field:'status',width:60,align:'center'">Status</th>

            </tr>

        </thead>

        <tbody>

            <apex:repeat value="{!accList}" var="acc">

                <tr>

                    <td>{!acc.Name}</td>

                    <td>{!acc.Name}</td>

                    <td>{!acc.Name}</td>

                    <td>{!acc.Name}</td>

                    <td>{!acc.Name}</td>

                    <td>{!acc.Name}</td>

                </tr>

            </apex:repeat>

        </tbody>

    </table>

</apex:page>

Controller : FreezeTableController

public class FreezeTableController{
    public list<Account> accList{get;set;}
    // Global JSON generator
    public JSONGenerator gen {get; set;}
    public String JsonData {get; set;}
    public FreezeTableController(){
        gen = JSON.createGenerator(true);    
        gen.writeStartObject();
        accList = [select Id, Name from Account];
        gen.writeStringField('total',accList.size() + '');
        gen.writeFieldName('rows');
        gen.writeStartArray(); 
        for(Account acc : accList){
          gen.writeStartObject();
            gen.writeStringField('productid', acc.Id);
            gen.writeStringField('productname', acc.Name);
            gen.writeStringField('unitcost', acc.Id);
            gen.writeStringField('status', acc.Id);
            gen.writeStringField('listprice', acc.Id);
            gen.writeStringField('attr1', acc.Id);
            gen.writeStringField('itemid', acc.Id);
            gen.writeEndObject();
        }
        gen.writeEndArray();
        gen.writeEndObject();
        JsonData = gen.getAsString(); 
    }
}

JSON sample : 

"total" : "31",
  "rows" : [ {
    "productid" : "0019000000SEf0aAAD",
    "productname" : "Diwali",
    "unitcost" : "0019000000SEf0aAAD",
    "status" : "0019000000SEf0aAAD",
    "listprice" : "0019000000SEf0aAAD",
    "attr1" : "0019000000SEf0aAAD",
    "itemid" : "0019000000SEf0aAAD"
  }, {
    "productid" : "0019000000SEf6WAAT",
    "productname" : "test",
    "unitcost" : "0019000000SEf6WAAT",
    "status" : "0019000000SEf6WAAT",
    "listprice" : "0019000000SEf6WAAT",
    "attr1" : "0019000000SEf6WAAT",
    "itemid" : "0019000000SEf6WAAT"
  }]
}