jQuery data table冻结表头后无法横向滚动如何解决

直接用DataTable原生支持的配置即可实现，不需要手写自定义定位样式，避免出现滚动不同步、列宽错位问题。

方案1：内置配置实现（无需额外引入扩展，推荐） #

直接修改Datatable初始化参数，新增滚动和固定表头相关配置，同时配合少量样式修正即可。

修改后的初始化代码 #

function list_all() {
  var tables;
  tables = $('#showdata').DataTable({

    "processing": true, // 控制加载提示
    "serverSide": true, // 开启服务端处理模式
    "order": [], // 默认无排序

    // Ajax数据源配置
    "ajax": {
      "url": "<?php echo base_url() ?>cms/event_reporting_report_c/ajax_list",
      "type": "POST"
    },

    // 列属性配置
    "columnDefs": [{
      "targets": [0], // 第一列序号列
      "orderable": false, // 禁用排序
    }, ],

    "dom": 'Bfrtip',
    "buttons": [
      'copy', 'csv', 'excel', 'pdf', 'print'
    ],

    "searching": true,
    "ordering": false,
    "paging": false,
    "info": false,

    // 新增以下配置 start
    "scrollX": true, // 开启横向滚动
    "scrollCollapse": true, // 高度随内容自适应
    "fixedHeader": {
      "header": true, // 开启表头固定
      "headerOffset": 0 // 页面如果有固定顶部导航，填写导航高度，例如60
    },
    "initComplete": function() {
      // 数据加载完成后重算列宽，解决表头表身错位问题
      tables.columns.adjust();
    }
    // 新增配置 end
  });
}

配套CSS样式 #

把以下样式加到全局样式表中，避免宽度计算异常：

/* 限制表格容器宽度 */
.dataTables_wrapper {
  width: 100%;
  overflow-x: auto;
}
/* 禁止单元格内容自动换行，保证列宽计算一致 */
#showdata th,
#showdata td {
  white-space: nowrap;
}

常见踩坑排查 #

• 不要手动给thead、th写position: fixed/absolute这类自定义定位样式，会脱离文档流直接导致横向滚动不同步
• 不要在表格外层额外套overflow: auto的容器，多层滚动容器会导致滚动冲突
• 如果是低版本DataTable（1.10之前），需要引入和主版本匹配的FixedHeader扩展资源才能使用fixedHeader配置
• 服务端加载数据场景必须在initComplete里执行列宽重算，否则ajax渲染完内容后表头宽度会和表身不匹配

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