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

setbon

Please see https://stackoverflow.com/questions/45404833/why-does-data-table-table-last-header-not-align-with-last-column
I was suggested to insert the code table.columns.adjust(); but I don't know where to place it.

kthorngren

table.columns.adjust().draw();

This needs to run after the Datatable is displayed. I'm not sure how Foundation works but maybe you need to move it from line 1110 to between 1112 and 1113 - between these two lines, like this:

      }).foundation();
     table.columns.adjust().draw();
      </script>

Kevin

setbon

Hi Kevin, thanks for suggestion. I just moved it but nothing changed...anything else I could try ?

kthorngren

How are you fixing the header?

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/

If this is the case I don't think table.columns.adjust().draw() will fix your issue.

Kevin

setbon

Based on your last comment I deactivated <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.foundation.css"/> and and reloaded but still no change...

kthorngren

There are 2 FixedHeader CSS and 2 FixedHeader JS files you are loading. I'm not sure where or how you are enabling it. Or if you are using something else for FixedHeader.

Since you have only 42 rows a simpler test maybe to comment out scrollX, scrollY and scrollCollapse.

Kevin

setbon

on http://iprobesolutions.com/learn/wireless-conference-system-comparison I commented out all the files I found which mentioned FixedHeader and I made ScrollX, scrollY and scrollCollapse all "false". It looks like it did the trick!!!

Thank you very very much. If you like to comment on SO I can approve your answer ?