Question

I have an issue with Datatables not using its x-axis scroll correctly.

I was previously faced with the IE9 ‘ghost cell’ issue, which I was able to fix. However, now I’m running into a problem where my overflow-x is shown, instead of hiding it and making the window scrollable.

My Datatables initialization:

 var oTable = $('#tableBP').dataTable({
        "bJQueryUI": true,
        "sScrollX": "100%",
        "sScrollXInner": "200%",
        "sScrollY": 300,
        "bScrollCollapse": false,
        "bFilter": true,
        "bSort": false,
        "bInfo": false,
        "bPaginate": false
    });

    //This is a Datatables plugin. The issue occurs whether I comment this part or not.
    new FixedColumns(oTable, { 
        "iLeftWidth": 225
    });

This is what I’m faced with:

It works in IE9 compatibility mode though. Unfortunately, other parts of the page do not allow me te run this is a lower version compatibility, but this clearly marks it as a IE9 only issue. No issues in Chrome, Safari, Opera, Firefox.

I’m not going to post the table here because of its sheer size (2000+ td fields in some cases). It is a perfectly valid HTML table with a thead/tbody, and all whitespaces between the tags have been removed (this is what fixed my previous ghost cell issue).

Anyone have any experience with Datatables and know the root cause of this issue?

PS: this is an MVC2 app (C#.Net) but this issue seems unrelated to the application that generated this webpage.

Update

I forgot to mention the following part:

The table used to be displayed properly; but due to IE9’s ghost cell issue in large tables, I was forced to clean all whitespaces from between my table/thead/tbody/tr/td tags.
I resolved this by forcing a regex replace on my aplication’s HTML output:

// response is the string with my HTML output which will be written to the browser after this:

string expression = @">[ \t\r\n\v\f]*<td"; 
response = Regex.Replace(response, expression, @"> <td");

If I comment out the RegEx replace, the overflow of datatables works perfectly, but I’m faced with the ghost cell issue which cause misalignment and all-round ugliness.
When uncommented, all cells are perfectly aligned, but the overflow stops working.

Like I said, the issue only pertains to IE9. All other browsers(including IE9 in compatibility mode) render the table perfectly in both commented/uncommented states.

Answer 1

I’ve managed to fix the issue, after a lot of searching and patience.

The issue was Bootstrap related. Well, not Bootstrap exactly, but what Bootstrap.css does is add a max-width: 100%; to every table. Which is great for general layout, but apparently IE9 can’t combine that with a scrollable overflow-x setup. IE9 doesn’t really like max- and min- heights and widths from my experience.

But I still want to thank all of you for your efforts, you put me on the right road to find the root cause of this issue!