Firefox - Unaligned thead with tbody with scrollX enabled

vallovic

Hi!

In the company I work we're developing a web platform that needs to fully support Chrome and Firefox (at least no IE needed!) and we are using DataTables. Everything as been running smoothly with it but there's a problem that annoy us (and the client too), which is the alignment of the thead with the tbody when we have scrollX enabled in Firefox.

I've used CSS to show the hidden thead of the div.dataTables_scrollBody to compare the alignments and take a picture of it, which is this one - http://i.imgur.com/jMilmcQ.png - As you can see, the thead of the div.dataTables_scrollHead isn't aligned with the thead of the div.dataTables_scrollBody.

In Chrome they are not aligned too but the difference is very small and is consistent as you can see here - http://i.imgur.com/rjtIRTd.png - which doesn't raise any concern.

I've tried to create a fiddle of it but can't reproduce the problem in there (it works like it should) and I've spent some hours trying to fix it but with no success. I've tried every single 10.x version of DataTables and the problem persists.

I used other options to create my own scrollX behaviour with success however I need to use the FixedColumns extension which requires scrollX property to be enabled.

Does anyone knows what is this problem and how can I solve it?

allan

Can you link to the page so we can debug it please?

The only thing that immediately springs to mind is to check that you don't have the scroll-collapse: collapse CSS option set for the table.

Allan

vallovic

Hi Allan, thanks for the reply.

Unfortunately, since this is a proprietary platform I can't link to a page to debug it and, as I said in my first post, I've tried to create a fiddle of it but can't reproduce the problem in there (it works like it should).

After posting and continuing to test some possibilities, I've managed to get a "dirty hack" working for Firefox but not with Chrome (it makes columns much more unaligned), which is the following:

$('.dataTables_scrollHead thead th').each(function(index) {
    var nthChild = index + 1;
    $(this).css('width', $('.dataTables_scrollBody thead th:nth-child(' + nthChild + ')').width());
});

Some more testing and I found out that if I change the end of line 3 from .width()(1) to .css('width')(2) it will work in Chrome but not with Firefox. In fact, if I apply the hack (2) to Chrome just after normal initialization it doesn't have any effect, which put me into thinking that this is the usual behaviour from DataTables. Maybe, if it's worth it, using hack (1) with Firefox is the answer?

For now and since I need to get this working as soon as possible, I think I'll through some browser detection into the code and apply the "dirty hack" when Firefox is detected.

allan

Odd - sorry I can't help at the moment. If I had a way to produce the issue so I could debug it I might be of some use, but at the moment I'd just be guessing.

Allan