dataTables JS Plugin responsive width overflows se

Question

Using the DataTables plugin for displaying tabular data I found that when setting a percentage width on the tables container div the plugin was performing a width calculation and setting a pixel width on the table which was actually wider than the div.

This wasn't an issue when using the table at full width in responsive mode, but when trying at halfwidth it overshot the set width and forced the browser window to scroll horizontally.

Code:

$('#' + tableID).dataTable({
    "dom": 'Rlfrtip',
    "ajax" : file,
    "responsive": true,
    "columns" : columnDataMap,
    "order": [[ 1, "desc" ]],
    "sAjaxDataProp" : "items",
    colReorder: {
        fixedColumns: 1
    },
    "columnDefs": [ {
        "targets": 0,
        "sortable": false,
        "data": null,
        "defaultContent": '...'
    } ]
});

Answer 1

You can stop DataTables from adding a (faulty) width to the table by adding the following option when initialising the plugin:

"bAutoWidth":false,

End product:

$('#' + tableID).dataTable({
    "dom": 'Rlfrtip',
    "ajax" : file,
    "responsive": true,
    "bAutoWidth":false,  
    "columns" : columnDataMap,
    "order": [[ 1, "desc" ]],
    "sAjaxDataProp" : "items",
    colReorder: {
        fixedColumns: 1
    },
    "columnDefs": [ {
        "targets": 0,
        "sortable": false,
        "data": null,
        "defaultContent": '...'
    } ]
});