使用scrollY属性时DataTables表头与表格内容行无法对齐问题

问题根因 #

• 不可修改的全局CSS中存在th+th+th { width: 100% }规则，会强制第三个表头单元格占满整行宽度。DataTable开启scrollY属性后会自动将表头、表体拆分为两个独立的<table>元素渲染，该规则会干扰两个表的列宽同步计算
• 全局table { width: 100% }、边框折叠规则与DataTable自带的滚动布局样式冲突，导致表头表体的宽度计算出现偏差
• 示例代码中的HTML部分<table id="userStories">标签未闭合，也会导致部分浏览器渲染异常

修复方案 #

方案1：添加高优先级CSS覆盖冲突规则 #

在全局样式后新增以下CSS，不影响原有不可修改的样式规则：

/* 重置DataTable滚动布局下的表头宽度规则 */
.dataTables_scrollHead th, 
.dataTables_scrollBody th {
    width: auto !important;
}

方案2：修改DataTable初始化配置 #

关闭自动宽度计算，手动指定每列宽度，初始化完成后主动校正列宽对齐：

tbl = $('#userStories').DataTable({
    data: dataSet,
    columns: [
        {
            title: "ID",
            data: "id",
            width: "15%" // 手动指定列宽，可按需调整
        },
        {
            title: "Name",
            data: "name",
            width: "35%"
        },
        {
            title: "Age",
            data: "age",
            width: "50%"
        }
    ],
    scrollY: "300px",
    scrollCollapse: true,
    paging: false,
    info: true,
    autoWidth: false, // 关闭自动宽度计算，优先使用手动指定的列宽
    initComplete: function () {
        // 初始化完成后校正列宽，解决表头表体错位问题
        this.api().columns.adjust();
    }
});

可选兜底处理 #

如果页面存在动态缩放、容器宽度变化的场景，可添加监听事件动态校正：

$(window).on('resize', function () {
    tbl.columns.adjust();
});

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