Search code examples
datatablesdatatables-1.10zurb-foundation-5

Why does data-table table last header not align with last column?

I created a table with DataTable library (that is using foundation-zurb 5.5.3), Per the below image I'm seeing both in Chrome as in IE 11 that the most right column header the most right column header does not align with the other rows when you first open up the page. The actual webpage is http://iprobesolutions.com/learn/wireless-conference-system-comparison. However if I open devtools to try and inspect the code the issue dissappears! When I refresh with CTRL+ F5 it however reappears.

The issue does not appear when I create this fiddle: http://jsfiddle.net/setbon/x75o53ck/

Below is just a small part of the code pasted. I'd really appreciate if you could look at the webpage since this is where the issue is displayed...perhaps a bug in IE and Chrome ?

<table id="example" class="display nowrap table1 compact">
Solution

  • I see you are loading the Datatables FixedHeader code. I don't see how or if you are using it but its not compatible with scrollX and scrollY: https://datatables.net/extensions/fixedheader/

    Try removing either FixHeader or the scrolling options.