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

忘记scrollX，使用在这个问题上提出的解决方案：

启用 scrollX 时标题列与 DataTable 未对齐

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