datatable - Misaligned headers in Richfaces ScrollableDataTable -

i facing issue headers mis-aligning after being sorted on.i have scrollabledatatable has fixed size (850px) , n columns (adding >850px). initial table render looks good. problem starts when scroll right , try sort columns hidden sight.

the first few columns fall within 850 px tend sort , re-render table fine. when scroll right , try sort rest of columns, sort works fine column , data below tends misaligned. re-render focuses onto sorted column, data below tends anchor original columns.

i did see if has encountered issue... no solutions in sight. feedback appreciated.

<rich:scrollabledatatable id="idmydatatable"    value="#{dataentities}" var="row"    style="width:850px; height:390px;"    rowkeyvar="rkv"     rendered="#{not empty dataentities}"    columnclasses="nopadding"    headerclass="nopadding"    selectionmode="single"    eventsqueue="default"    enablecontextmenu="false">  <!-- columns until 'uploaddate' render , sort fine-->  <rich:column width="120px" sortable="true">     <f:facet name="header">     <a4j:commandbutton value="uploaddate" status="processingprompt"             actionlistener="#{myactionclass.sortdatacolumn('uploaddate')}"             style="width: 120px;background-color: rgb(210,210,210)"              eventsqueue="default"             oncomplete="javascript:setfocusaftersort();"             rerender="idmydatatable"/>     </f:facet>     #{row.uploaddate}  </rich:column>  <!-- columns 'sentflag' misaligned upon sorting -->  <rich:column width="100px" sortable="true">     <f:facet name="header">     <a4j:commandbutton value="sentflag" status="processingprompt"             actionlistener="#{myactionclass.sortdatacolumn('sentflag')}"             style="width:100px; background-color: rgb(210,210,210)"              eventsqueue="default"             oncomplete="javascript:setfocusaftersort();"             rerender="idmydatatable" escape="true"/>     </f:facet>         #{row.sentflag} </rich:column> 

function setfocusaftersort(){ setfocustospecifiedrowofdatatable('idmydatatable','0'); }   function setfocustospecifiedrowofdatatable(datatableid, rowkey) {    if (rowkey == null) rowkey = "";    var rowcomponent =  jquery("input[id*='"+datatableid+":"+rowkey+"']:first");    if (rowcomponent.size() == 0) rowcomponent =        jquery("span[id*='"+datatableid+":"+rowkey+"']:first");    rowcomponent.focus();    sethighlightonspecifiedrowofdatatable(datatableid, rowkey); }