FixedHeader column widths incorrect for MultiHeader tables

Wooly65

This has been discussed in various posts on this forum and stackoverflow.
@dsteinburg post

My initial review was:
"Looking at the code (dataTables.fixedHeader.js) the _matchWidths function is retrieving all the TH widths appropriately. The code is then assigning the retrieved TH widths to the new element assigning the width and minWidth. Not sure why the 2nd header row isn't being displayed properly."

Finally I inspected the floating header and looked at the css that had been applied to the table. When I unchecked the table-layout: fixed the styling lined up perfectly. The code could be modified starting on line 281:
itemDom.floating = $( dt.table().node().cloneNode( false ) )
// .css( 'table-layout', 'fixed' )
.removeAttr( 'id' )
.append( itemElement )
.appendTo( 'body' );

This doesn't seem to break single line headers or footers. Is this change a possible fix @allan?
I have an example on jsfiddle that once the floating-header is shown you can change the 'table-layout' to auto and back to fixed to see the issue.

Example: https://jsfiddle.net/woolycew65/2pLer6eh/

dsteinberg

I think this works in the cases shown, my concern (without testing) is that it may break the DT layout engine for things like ScrollX or some combination of plugins. IMO, the solution with adding the extra row to the header is a bit safer since it doesn't modify the layout engine's functionality - and potentially DT could add that row for us automatically itself. This is clever though - if Allan could confirm it was safe to use that way, I would definitely prefer your solution!

Wooly65

Agreed, I do not have enough examples to throughly test the suggestion. Hopefully @allan knows why the table-layout: fixed was added and/or can run it through a suite of test cases.

Wooly65

The FixedHeader page states the following:

Please note that FixedHeader is not currently compatible with tables that have the scrolling features of DataTables enabled (scrollX / scrollY). Please refer to the compatibility table for full compatibility details.