'Datatables.net ScrollX | Header and Data column width issues

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.enter image description here

If I ignore scrollX: true Testcase 1 success and Test case 2 fails. enter image description here 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.

jquerycssscrolldatatables


Solution 1:[1]

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.

Solution 2:[2]

I had a similar problem, I was getting json data but the user could also upload others. And at this moment I had a problem that after the user requested new data, the width of the table header and the width of the table body became different. I solved this problem by removing (scrollX: true) and leaving (scrollY : "200px") - I needed a fixed height. It was all in a wrapper and that's why it worked for me

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 amuller
Solution 2 Dmytro__Chas

Related Questions