Duplicate header rows appear when using sScrollx option in datetable

Duplicate header rows appear when using sScrollx option in datetable

I have added following options to datatable
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true

There are duplicate header rows formed.The html structure formed includes one header formed with class name = "dataTables_scrollHead" and the other header row is formed inside dataTables_scrollBody > table > head

The jsfiddle link html code is provided : http://jsfiddle.net/Ne44E/

Replies

This is correct operation for DataTables. The header has to be in the header and body containers in order to allow the column alignment to work. The second header (the one in the body) should be hidden. If it isn't please link to a test case showing the issue.

We have same issue for IE7 with 1.10 version. For some reason IE7 doesn't understand height: 0px; and duplication of headers appears on scroll body. I created some patch for this:

// Clone the current header and footer elements and then place it into the inner table
headerCopy = header.clone().prependTo( table );
headerTrgEls = header.find('tr'); // original header is in its own table
headerSrcEls = headerCopy.find('tr');
headerCopy.find('th, td').removeAttr('tabindex').empty();

valenpo,
If you do the empty, it distorts the table content so that the columns do not match with the header. You cannot even set the line-height or font-size which is what you need to do with IE7 or any of the compatibility modes.

Allan,
I created a fiddle for you, but, the issue is with IE7 and the compatibility modes. Many of my customers fall into one of these options. JSFiddle does not work at all in anything less than IE9, so a screenshot is the best I could do. When I bring up your example in IE7, it works fine. So, I took your style and used that and the issue was resolved. Kinda a bummer since my style has half the code and I don't have any really good idea what about the style could be the issue.

Who on earth still uses IE5?! :-). Many libraries don't support IE6, 7 or 8 now. I've seen some dropping IE9 support as well. DataTables currently requires IE6+. IE5 is absolutely not supported in any way.

I agree. What stinks is that any site that requires "Compatibility Mode" will drop all the way down to IE5 Document Mode as the default. You can cause the site to render in IE7 (or IE8,9,10,Edge) mode by adding the X-UA-Compatible header but not all sites are doing that.

I agree it shouldn't be fixed in DataTables. But for anyone who runs into the double header issue in IE, open Dev Tools, go to the Emulation tab, and see if changing the Document Mode makes a difference. If so, no reason to report it as a bug.