Datatables.net ScrollX | Header and Data column width issues

Question

I'm trying to create wrapper for datatables.net table component, which create and enable features datatables based on classes defined in table.

$('table.data-table').each(function() { 
    var props = {};
    if ($(this).hasClass('select') && $(this).hasClass('multi'))
        props.select = 'multi';
    else if ($(this).hasClass('select')
        props.select = 'single';
    if ($(this).hasClass('long-table')
        props.scrollX = true;
    ...
    ...
    ...
    $(this).DataTable(props);
});

Like you see above based on classes defined in table DataTable's features enabled for all HTML tables.

Test Case 1: Table should fill it's container.

Test case 2: Scrolling should not create misalignment.

Here my issues is, If I set scrollX: true Testcase 1 fails and Test case 2 success.

If I ignore scrollX: true Testcase 1 success and Test case 2 fails. What will be possible solution to make both text cases success. I've already tried to set scrollX: '100%' and nothing got good results.

I don't wish to go with solution stating add long-grid class only to second grid and it automatically ignores scrollX:true on first grid. Because we know how many number of columns are there in table but not the length of string present in data and the screen size where the page rendered, this is for responsive application.

Any solution or CSS hacks are welcome.

Answer 1

Forget about scrollX, use the solution proposed on this question:

Header columns misaligned with DataTable when scrollX is enabled

$('#DataTableID').DataTable({
  //"scrollX": true,            
  "initComplete": function (settings, json) {  
    $("#DataTableID").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");            
  },
});

Answer 2

I dont know about misalignment, but using scrollX: true makes the table not fill its container. To avoid this, set style="width:100%" in your table Datatables Flexible table width

Another solution is wrapping your .table in .table-responsive Bootstrap Responsive tables

I hope this helps someone.