jQuery DataTables宽度调整后表头与表体错位问题求助

我之前也碰到过一模一样的情况——开启了scrollX的DataTables，调整页面或容器宽度后，表头和表体就对不上了，特别影响体验。结合你的代码，我给你几个靠谱的解决办法：

先修正代码里的小错误 #

首先看你的ASP.NET代码，最后一个<td>标签有语法问题：

<% Response.Write(" <td Class=""text-center"">" role="button">Amend</a></td>")%>

这里少了<a>的起始标签，应该改成：

<% Response.Write(" <td Class=""text-center""><a role=""button"">Amend</a></td>")%>

这个小问题可能会导致表格渲染异常，先修复它。

核心解决方案：监听Resize事件并重新对齐表头 #

DataTables开启scrollX后，表头会被渲染成一个独立的元素，和表体分开。当容器宽度变化时，DataTables不会自动重新计算表头宽度，所以需要我们手动触发调整。

修改你的JavaScript代码，保存DataTables实例，然后添加resize事件监听：

$(document).ready(function () {
    // 保存DataTables实例
    const userTable = $('#dataTables-UserProfiles').DataTable({
        responsive: true,
        scrollX: true,
        scrollCollapse: true,
        paging: false,
        "bInfo": false,
        "order": [[1, "asc"]]
    });

    // 监听窗口resize事件，处理页面宽度变化的情况
    $(window).on('resize', function() {
        // 调整列宽并重绘表格，false表示保持当前分页和排序状态
        userTable.columns.adjust().draw(false);
        // 强制同步表头和表体的横向滚动位置
        const headerTable = userTable.table().header();
        const bodyTable = userTable.table().body();
        $(headerTable).scrollLeft($(bodyTable).scrollLeft());
    });

    // 如果容器是动态调整宽度（比如侧边栏展开收起），额外监听容器的尺寸变化
    $('.dataTable_wrapper').on('resize', function() {
        userTable.columns.adjust().draw(false);
    });
});

为什么这个方法有效？ #

• columns.adjust()：让DataTables重新计算每列的宽度，适配当前容器尺寸
• draw(false)：重绘表格但不改变当前的分页、排序状态，避免页面不必要的跳动
• 同步表头和表体的scrollLeft：确保横向滚动条的位置完全一致，防止表头和表体滚动错位

额外的优化建议 #

• 尽量避免给列设置固定宽度（比如你的最后一列width="80"），让DataTables自动计算宽度能减少错位概率；如果必须固定宽度，确保表头和表体的列宽度设置完全一致
• 检查dataTable_wrapper的CSS样式，不要给它设置overflow: hidden这类属性，会干扰DataTables的滚动逻辑
• 确认Bootstrap的响应式类和DataTables的responsive选项兼容，避免样式冲突

内容的提问来源于stack exchange，提问作者Imad Abu Hayyah