Datatable启用ScrollY后表头不随窗口resize适配的问题求助

针对你使用Bootstrap 3.3.6 + Datatable 1.11.5启用scrollY后，表头无法随窗口大小调整的问题，可通过以下步骤修复：

1. 调整Datatable初始化配置 #

移除responsive选项（该选项与scrollY存在布局冲突，会干扰表头宽度的自适应逻辑），保留核心配置：

let tableMain = $('#tbMain').DataTable({
    scrollY: '400px',
    scrollCollapse: true,
    ordering: false,
    order: [1, 'asc'],
    columns: [
        {width: '5%', className: 'text-center'},
        {width: '5%', className: 'text-center'},
        {width: '30%', className: 'text-center'},
        {width: '40%', className: 'text-center'},
        {width: '10%', className: 'text-center'},
        {width: '10%', className: 'text-center'}
    ],
    buttons: []
});

2. 添加窗口resize事件监听 #

通过监听窗口大小变化，强制同步表头与表体的宽度：

// 窗口 resize 时同步表头宽度
$(window).on('resize', function() {
    // 让Datatable重新计算列宽
    tableMain.columns.adjust().draw(false);
    // 强制设置生成的表头容器及表格宽度为100%
    $('.dataTables_scrollHeadInner').css({
        'width': '100%',
        'box-sizing': 'border-box'
    });
    $('.dataTables_scrollHeadInner table').css('width', '100%');
});

// 页面加载完成后立即执行一次，确保初始状态正确
$(window).trigger('resize');

$("body").css("overflow", "hidden");

3. 添加CSS强制宽度自适应 #

通过CSS优先级强制覆盖Datatable生成的固定宽度样式：

.dataTables_scrollHeadInner {
    width: 100% !important;
    box-sizing: border-box !important;
}
.dataTables_scrollHeadInner table {
    width: 100% !important;
}

问题原因说明 #

启用scrollY后，Datatable会自动生成独立的表头容器（.dataTables_scrollHeadInner及内部表格），并为其设置固定宽度值。窗口调整时，该固定宽度不会自动更新，导致表头与表体错位。通过resize事件触发列宽重计算+强制设置100%宽度，即可让表头随窗口自适应。

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