Datatables FixedColumns With “nowrap” Requirement

DenverCoder09

Hi all,

This is a shameless copy of a Stack Overflow question I asked around a week ago: http://stackoverflow.com/questions/32386364/datatables-fixedcolumns-with-nowrap-requirement

There was a solution that fixed an earlier example but not my real world solution in IE.

I have a large tabular amount of data where the leftmost column needs to always be displayed and where each row should take up only one line - which can be achieved with the CSS directive white-space: nowrap.

I have chosen the DataTables jQuery plugin along with its FixedColumns extension, which fits the bill quite nicely for what I'm looking to do.

However, Internet Explorer (version 11 is what I have at hand) I see that the grid does not align correctly - the fixed column has a scroll bar of its own and the table headers no longer perfectly align with their corresponding columns.

I have created a JSFiddle to demonstrate the issue - http://jsfiddle.net/tczwysao/11/. You can see that if you comment out the white-space directive then the columns then line up. But I do need the leftmost column to stay on the one line.

Is there an error in the way I have implemented this or can anyone suggest a workaround?