Column alignment issue with fixed header data table

Question

I am using fixed header property for the angular data table and the code look like as follows

$scope.table.dataTable($scope.gridOpts);    
new $.fn.dataTable.FixedHeader($scope.table);

The header of the table became fixed at the top of the page while scrolling, and everything worked fine. But I faced column alignment issue between the header columns and body columns of data table.

So I tried the solution described in http://bobcravens.com/2010/01/html-scrolling-table-with-fixed-headers-jquery-plugin/, but the result remains same.

I couldn't understand why this happens. So I given some timeout on calling the fixed header functionality new $.fn.dataTable.FixedHeader($scope.table);. But the result again remains same.

Any body faced the same issue?

Answer 1

OMG, the problem is a simple one. The data table fixed header functionality is cloning the table header and appending to the body. But the trap is, the classes given to the original table head will not be available in the cloned table, if the styles are defined by referring some parent class. So if we gave some font sizes to the table head will not reflect in cloned header and hence the column alignment will be broken!.