FixedHeader Table Headers Don't Match

FixedHeader Table Headers Don't Match

d4rkcond4rkcon Posts: 1Questions: 0Answers: 0
edited March 2010 in FixedHeader
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:

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


  • allanallan Posts: 62,447Questions: 1Answers: 10,251 Site admin
    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?

  • vuceticavucetica Posts: 15Questions: 0Answers: 0
    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 here is my fix (again, might be wrong, but it works on my setup):
    at the end of _fnCloneTfoot:
    /* 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));

    Similar for _fnCloneThead.

    Also I removed any colspans in header and footer and changed them with empty cells.
  • mstone42mstone42 Posts: 13Questions: 0Answers: 0
    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.
This discussion has been closed.