jQuery Datatables Header Misaligned With Vertical Scrolling

Question

I've posted this in the datatables.net forums, but after a week, still no response. Hopefully I can find help here...

I'm using datatables version 1.8.1 and am having nightmares over column header alignment with vertical scrolling enabled.

With the code posted below, the headers line up correctly in Firefox and IE8 and IE9, but Chrome and IE7 are off. I'm using a lot of datatables on this project, and this is a problem with every one. I'm desperate for help!

EDIT: I have figured out that this has something to do with setting the width of the table. The datatable takes the width of its container. If I set no width, everything lines up fine (but the table is too big for where I need it on the page). If I give the table's div (or a parent div somewhere higher up) a width at all, the headers don't line up properly.

Thanks!!

Screenshots:

www.dennissheppard.net/firefox_alignment.png

www.dennissheppard.net/chrome_alignment.png

www.dennissheppard.net/ie7_alignment.png

otable = $('#order_review_grid').dataTable({                     'fnRowCallback': function (nRow, strings, displayIndex, dataIndex) {         return formatRow(nRow, dataIndex);     },     'fnDrawCallback':function()     {         checkIfOrderSubmitted(this);                         },     'aoColumnDefs':     [         { 'bVisible': false, 'aTargets': [COL_PRODUCT] },         { 'bSortable': false, 'aTargets': [COL_IMAGE, COL_DELETE] },         { 'sClass': 'right_align', 'aTargets': [COL_PRICE] },         { 'sClass': 'center_align', 'aTargets': [COL_BRAND,COL_PACK] },         { 'sClass': 'left_align', 'aTargets': [COL_DESCRIPTION] }     ],     'sDom': 't',     'sScrollY':'405px',     'bScrollCollapse':true,     'aaSorting':[] });  <table id="order_review_grid" class="grid_table" cellpadding="0px" cellspacing="0px">                      <thead class="grid_column_header_row" id="order_review_grid_column_header_row">         <tr>             <td class="" id='sequenceNumber'>SEQ #</td>             <td class="grid_sc_header" id='statusCode'>Sc</td>             <td class="grid_sc_header" id='onOrderGuide'>O.G.</td>             <td class="grid_image_header" id='image'>Image</td>                                      <td class="grid_description_header" id='description'>Description</td>                                        <td class="grid_brand_header" id='label'>Brand</td>             <td class="grid_pack_header" id='packSize'>Pack</td>             <td class="grid_price_header" id='price'>Price</td>             <td class="grid_qtrfull_header" id='caseQuantity'>Full</td>             <td class="grid_qtrypart_header" id='eachQuantity'>Partial</td>             <td class="grid_refnum_header" id='referenceNumber'>Ref #</td>             <td class="grid_refnum_header">&nbsp;</td>         </tr>     </thead>     <tbody class="">         <!-- loaded data will go here -->     </tbody> </table> 

Answer 1

I'm having the same problem here. It works fine (pixel-perfect column aligned) in Mozilla Firefox, Opera but not in Chrome 21.

Solution:

Like mentioned in this post http://datatables.net/forums/discussion/3835/width-columns-problem-in-chrome-safari/p1

Basically what is happening, is that DataTables is trying to read the width of the table, that the browser has drawn, so it can make the header match. The problem is that when DataTables does this calculation on your page, the browser hasn't shown the scrollbar - and hence the calculation is slightly wrong! The reason I suggest that it's a Webkit bug, is that, even after DataTables has run through all of it's logic, the scrollbar still hasn't been displayed. If you add the following code you can see the effect of this:

console.log( $(oTable.fnSettings().nTable).outerWidth() ); setTimeout( function () { console.log( $(oTable.fnSettings().nTable).outerWidth() ); }, 1 );

The interesting part is that after I added setTimeout and after it executed there was still one column not aligned. After adding "sScrollX": "100%", "sScrollXInner": "100%" all columns were aligned (pixel-perfect).

Solution for Chrome/Chromium, works ofcource in FF, Opera, IE9:

$(document).ready(function() {   var oTable = $('#mytable').dataTable(   {     "sScrollY":  ( 0.6 * $(window).height() ),     "bPaginate": false,     "bJQueryUI": true,     "bScrollCollapse": true,     "bAutoWidth": true,     "sScrollX": "100%",     "sScrollXInner": "100%"   });     setTimeout(function ()   {     oTable.fnAdjustColumnSizing();   }, 10 );  }); 

Answer 2

I solved this problem by wrapping the "dataTable" Table with a div with overflow:auto

.dataTables_scroll {     overflow:auto; } 

and add this JS after your dataTable initialization

jQuery('.dataTable').wrap('<div class="dataTables_scroll" />'); 

Dont use sScrollX or sScrollY, remove then and add a div wrapper yourself which does the same thing.