dataTables JS插件响应宽度溢出设置div宽度

Question

使用DataTables插件显示表格数据我发现当在表容器div上设置百分比宽度时，插件执行宽度计算并在表格上设置一个实际上比div宽的像素宽度。

在响应模式下以全宽度使用表时，这不是问题，但是当尝试半宽时，它会超出设置的宽度并强制浏览器窗口水平滚动。

码：

$('#' + 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

初始化插件时，可以通过添加以下选项来阻止DataTables向表中添加（错误）宽度：

"bAutoWidth":false,

最终产品：

$('#' + 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": '...'
    } ]
});