Column Header not aligned with column data with horizontal scrolling

allan

@rickb - Link to your page and we might be able to help.

rcuartas

Hi,
I was struggling with same issue and after reading many post here is how problem was "fixed".

- Add into CSS
.scrollStyle
{
overflow-x:auto;
}

- Add in the view after call dataTable

jQuery('.dataTable').wrap('');

Eg.
oTable = $('#myDataTable').dataTable({
"aaSorting": [[2, "asc"]],
"sPaginationType": "full_numbers",
"bJQueryUI": true,
"aoColumnDefs": [
{ "bSortable": false, "bSearchable": false, "aTargets": [0] },
{ "bVisible": false, "bSortable": false, "bSearchable": false, "aTargets": [1] }
],
});

$(window).bind('resize', function () {
oTable.fnAdjustColumnSizing();
});
jQuery('.dataTable').wrap('');

clawsonmj

I'm having a similar problem, and I've looked all through these forums trying many different fixes, with no consistant fixes. So far, it works perfectly in FF, and IE 11. Chrome and IE 7 are both a little off:

http://clawsondesigns.com/table/index.htm

Allan, can you take a look for me please?

clawsonmj

Nevermind.

For those looking for another potential fix for this type of problem, set a fixed width on the table, if your situation calls for it. In my case I put a 4000px width on the table in css, and that takes the mathwork out of the problem. It now works in all the browsers that I've tried it in.

fg1998

Hi Guys, first post.

I did have this issue, but only when Chrome Zoom is set different from 100%.

I really dont know how to fix this, but if you can, tell users to restore default zoom view

Cheers

allan

@fg1998 - Interesting. Thanks for letting us know about this. I've seen this also happen in older IE version with zoom !== 100%. I'll keep an eye out for it in Chrome as well.

Allan

alaska

I was having similar problems when datatables was rendering to an hidden div, changing the render trigger solved the problem.

amoljore

Hi, This may help

$(".dataTables_scrollHeadInner").css({"width":"100%"});

$(".table ").css({"width":"100%"});

I placed it in my drawCallback function, and that worked for me(can be in your-style.css)

AmolJore

zebka1000

For me, add option

scrollX: "100%''

to my dataTable intialization was the only solution to have header and body right align with scrollX activate.

Thks to Dekari

holdencreative

Hey folks,

I believe the issue is that both <th> and <td> elements within the dataTables wrapper need a CSS styling rule of "box-sizing: content-box" applied. This seems to be required for the JS to correctly calculate th widths in the docked header.

table.dataTable,
table.dataTable th,
table.dataTable td {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

I've put a post on making scroll-x and scroll-y work in a responsive context here: https://datatables.net/forums/discussion/26578/solution-scrollable-vertical-and-horizontal-responsive-datatables-via-flexbox#latest

Example code here: http://codepen.io/holdencreative/pen/ZYqoMg

abhishek_shrivastava

I have resolved this issue by calling draw() method on a separate call after creating the data table.
$('#abc').DataTable().draw();