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 ha

Answer 1

I also had this problem. After many different tries I tried the below and succeeded.

I tried adding label tag with the float property in the style attribute. Then it worked find.

For example:

<td class="" id='sequenceNumber'><label style="float:left;">SEQ #</label></td>

Answer 2

We can handle this using css and minor changes in sDom.

Add following class in your css file

.scrollDiv {
    max-width:860px; //set width as per your requirement
    overflow-x:scroll;  
}

replace your 't' in sDom attribute of table with <"scrollDiv"t> and remove scrollX attribute of table

Save and Enjoy ! :)

Answer 3

I too faced the same issue. I solved it by removing 'sScrollY':'405px' from the datatable property and used fixed header.

Answer 4

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 5

this might help you (not sure but i guess that its worth trying)

add this code to the page

if ( $.browser.webkit ) {
   setTimeout( function () {
       oTable.fnAdjustColumnSizing();
   }, 10 );
}

taken from here width columns problem in Chrome & Safari

Also, i guess it worth trying to define the columns in the constructor only instead of defining them in the (leave tag empty)

Answer 6

I found that the width would misalign in the first window scroll, so the solution is to, on the first scroll only request a new table draw.

const $table = $('#table').DataTable({ ... });

$(window).on('scroll', () => {
  $(window).off('scroll');
  $table.tables().draw();
});

Edit: Also works with a setTimeout function. This depends when the misaligning happens.

$table.tables().draw() is the key here.