FixedHeader Table Headers Don't Match

d4rkcon

Hi guys,

Just started playing around with DataTables and FixedHeader. I'm really liking the tools so far, very cool. Ran into a small problem trying to enable FixedHeader on a table, though. I'm using the basic CSS ruleset included with DataTables but when I enabled FixedHeader on the table the headers in the FixedHeader_Clone div don't match the headers from the underlying table. For some reason it looks like the first table header's width isn't quite long enough so there's a gap at the end. The functionality in the FixedHeader still works (scrolls fine, sorting works) it just doesn't appear lined up.

Here's a screenshot of the behavior here:
http://imgur.com/WQ7Fi.png

Any ideas where I would look to find what's causing this behavior?

allan

Hi d4rkcon,

Doesn't look too good... Are you able to post a link to a working example which is showing this behaviour? Also, is it like this in all browsers?

Allan

vucetica

I had similar issues, actually, fixed header worked only with FF, but not in any other browser (cloned header cells were always shorter). It might be that I initialized datatables somehow wrong, but anyway, I fixed it by modifying fixedheader clone methods (for thead and tfoot cloning), and putting one extra pixel in width. During debug I noticed that .width() jquery method returned 1 pixel shorter width...so here is my fix (again, might be wrong, but it works on my setup):
at the end of _fnCloneTfoot:
[code]
/* Copy the widths across - apparently a clone isn't good enough for this */
jQuery("tfoot:eq(0)>tr th", s.nTable).each(function(i) {
jQuery("tfoot:eq(0)>tr th:eq(" + i + ")", nTable).width(jQuery(this).width() + (jQuery.browser == 'mozilla' ? 0 : 1));
});

jQuery("tfoot:eq(0)>tr td", s.nTable).each(function(i) {
jQuery("tfoot:eq(0)>tr th:eq(" + i + ")", nTable)[0].style.width(jQuery(this).width() + (jQuery.browser == 'mozilla' ? 0 : 1));
});
[/code]

Similar for _fnCloneThead.

Also I removed any colspans in header and footer and changed them with empty cells.

mstone42

I realize this thread is a couple of months old, but I was having the same problem as d4rkcon - the FixedHeader columns are more narrow than the original table on initialization. I've just tracked down the reason for my particular circumstances - in the CSS file, we had set the width for the table.display to be less than 100%. Apparently FH is taking this percentage and applying it a second time, e.g.
dataTables_wrapper { width: 100% }
table.display { width: 98% }
then FH renders the header an additional 2% less.
So, as long as the table.display width = 100% (or the table size is hard-coded, e.g. oTable.css('width','900px'); ), then FH calculates the sizes correctly.

I'm using DT1.6.2 and FH2.0.2 and the problem happened on both FF3.6 and IE7.

Hope this info is useful.
--Mitch