Datatable窗口resize时无法适配屏幕宽度，多类调整均无效

失效原因定位 #

• 配置项拼写错误：Datatable官方配置为驼峰格式autoWidth，你使用的全小写autowidth是非法配置，完全不会生效，这是之前调整无效的核心原因
• 表头残留固定像素内联样式：PHP输出表格后Datatable自动计算的列宽被写入th的style="width:xxpx"内联样式，resize时固定像素不会自动适配父容器宽度，优先级高于你设置的100%宽度规则
• 状态缓存复用固定列宽：开启stateSave后，旧的固定列宽配置会被缓存，窗口变化时不会重新计算列宽
• 之前使用的table-layout: fixed会强制锁定列宽计算逻辑，反而阻止自动适配

具体修复步骤 #

1. 修正初始化配置 #

替换原有错误的配置项，补充列宽缓存清除逻辑：

var table = $('#produtos').DataTable({
    responsive: true,
    autoWidth: true, // 修正为官方驼峰拼写，开启自动列宽计算
    stateSave: true,
    // 清除状态缓存中保存的旧列宽数据
    stateSaveParams: function(settings, data) {
        delete data.columns;
    },
    "language": {
        // 替换为本地语言包路径
        "url": "/lang/Portuguese.json"
    },
    dom: 'Bfrtip',
    buttons: [
        // 你的按钮配置项
    ],
});

2. 清除残留的固定列宽样式 #

初始化Datatable前，批量清除表头单元格上的内联宽度样式，避免初始化时读取旧的固定宽度：

// 必须在Datatable初始化前执行
$('#produtos thead th').removeAttr('style');

同时PHP输出表头时不要手动添加任何style="width:xxpx"的内联属性，完全交给Datatable自动计算列宽。

3. 补充resize时的强制重算逻辑 #

虽然Datatable默认会监听窗口变化事件，但如果存在DOM布局偏移的问题，手动触发重算可以强制刷新列宽适配：

// 窗口resize时触发列宽和响应式布局重算
$(window).on('resize', function() {
    table.columns.adjust().responsive.recalc();
});

4. 补充CSS覆盖规则 #

如果还有残留的固定宽度优先级冲突，补充以下强制CSS规则：

/* Datatable默认包裹容器占满父宽度 */
#produtos_wrapper {
    width: 100% !important;
}
#produtos {
    width: 100% !important;
    /* 不要使用fixed，改为auto才能自动适配列宽 */
    table-layout: auto !important;
}
/* 所有列取消固定宽度限制 */
#produtos thead th, #produtos tbody td {
    width: auto !important;
    /* 如需避免内容换行可保留最小宽度 */
    min-width: max-content;
}

注意事项 #

• 不要在静态HTML/PHP输出阶段给表头或单元格添加任何固定宽度样式
• 如果不需要状态保存功能，可以直接关闭stateSave，避免旧配置缓存
• 不需要横向滚动的话可以去掉min-width: max-content规则，让列宽完全自适应容器宽度

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