Datatables FixedColumns With "nowrap" Requirement
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?
Answer
You forgot to load Bootstrap and add appropriate table classes table table-striped table-bordered.
See this jsFiddle for demonstration of corrected code.