设置style='width:100%'后DataTable表头与表身宽度不对齐如何修复

• 首先修正Bootstrap类的使用错误：不要直接将table-responsive类加在<table>标签上，这个类作用是给表格添加横向滚动容器，加在表格本身会破坏DataTable的列宽自动计算逻辑，正确做法是将该类移到包裹表格的外层<div>上。
• 补全栅格布局宽度：你当前左侧内容使用了col-md-4类，但右侧id="dataList"的表格容器没有指定栅格宽度，布局宽度计算异常会导致DataTable宽高计算错误，给dataList元素添加col-md-8类，和左侧的col-md-4组成完整12栅格，保证容器宽度稳定。
• 初始化DataTable时添加宽度控制参数，避免自动宽计算偏差问题，示例初始化代码：

$('#example').DataTable({
  // 开启自动列宽计算
  autoWidth: true,
  // 手动指定每列宽度，总和为100%即可
  columns: [
    { width: "25%" },
    { width: "35%" },
    { width: "20%" },
    { width: "20%" }
  ]
})

• 如果表格是在隐藏容器中渲染后才显示的，需要在容器显示后手动调用API重算列宽：

$('#example').DataTable().columns.adjust()

• 验证修复：修改完成后清除浏览器缓存重新加载，确认表头和内容列宽完全对齐即可。

内容的提问来源于stack exchange，提问作者user3124540