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