使用scrollX，部分宽度容器和Bootstrap的table-sm类时，jQuery DataTables列宽不正确

问题描述

遇到DataTables的怪异问题。基本上，我所拥有的是一个不是全角的容器，并且在该div内我有一个table元素：

<div style="width: 50%;">
    <table id="example3" class="display nowrap table table-bordered table-striped table-sm" style="width:100%">
        <thead>
            <tr>
                <th>ID</th>
                <th>First name</th>
                <th>Last name</th>
                <th>ZIP / Post code</th>
                <th>Country</th>
            </tr>
        </thead>
    </table>
</div>

我正在使用以下方法初始化表格：

$(document).ready(function() {
    var data = [];
    for (var i = 0; i < 10000; i++) {
        data.push([i,i,i]);
    }

    $('#example3').DataTable({
        data: data,scrollX: true
    });
});

现在，我希望这可以工作，但最终得到的是：

请注意标题列如何与数据不匹配。

如果我删除“ table-sm”类或容器/表的宽度为100％，则此方法效果很好。我尝试了其他操作，例如手动更新列（table.columns.adjust()），但似乎无济于事。

有人对如何解决此问题有任何见解或想法吗？

jsFiddle显示了问题：https://jsfiddle.net/vnbm8eh0/

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

datatables javascript jquery