数据表格列数超过容器宽度时，横向滚动是最直接的展示方案，但滚动后首列脱离视口，用户根本无法判断当前行对应的是哪条数据。DataTables 生态里的 FixedColumns 扩展专门解决这类问题，它把左侧列从滚动区域中独立出来，在水平方向保持固定。实现思路并不复杂，但其中若干细节配置直接影响最终效果，值得展开讲讲。
FixedColumns 的工作原理与核心配置
FixedColumns 本质上是对 DataTables 主表格的视觉增强。它并不会改变原始表格的 DOM 结构，而是在主表格旁边生成一个或多个独立的表格副本，这些副本只包含需要固定的列，并通过对齐算法让固定列与主体表格的行高、列宽保持一致。当用户横向滚动主体表格时，固定列副本保持不动，视觉上就形成了列被冻结的效果。
这种方案的优点是原表格功能不受影响——排序、搜索、分页依然作用于主表格，FixedColumns 只负责外观层级的同步。代价是需要额外的 DOM 节点和样式计算，在数据量极大或列数极多时，同步开销会略有上升。理解这一点有助于我们判断什么时候需要调整配置，什么时候需要优化表格结构。
初始化时，FixedColumns 通过 fixedColumns 选项集成在 DataTables 配置中，核心参数是 leftColumns，用于指定左侧需要固定的列数。此外还有 rightColumns 控制右侧固定列数，以及 heightMatch 控制行高匹配策略。以下是一个基础配置示例：
$('#myTable').DataTable({
scrollX: true,
scrollY: 400,
scrollCollapse: true,
paging: false,
fixedColumns: {
leftColumns: 2,
rightColumns: 0
}
});
scrollX: true 是启用横向滚动的前提条件，没有这个配置，表格会尝试压缩列宽而不是产生滚动条。scrollCollapse: true 的作用是在表格实际宽度小于容器宽度时自动收缩滚动区域，避免出现无意义的空白滚动条。这两个配置通常需要搭配使用。
完整实现：固定左侧两列并横向滚动
为了演示完整效果，我们构建一个包含六列数据的表格，并将左侧两列固定。页面中需要依次引入 jQuery、DataTables 主库以及 FixedColumns 扩展。注意 DataTables 主库和 FixedColumns 的版本必须对应，否则可能出现方法不匹配的错误。
HTML 部分使用标准表格结构，thead 定义列头，tbody 填充数据。FixedColumns 对表格的 id 没有特殊要求，但表格必须已经是一个合法的 HTML 表格节点。以下为完整示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>FixedColumns 冻结列示例</title>
<link rel="stylesheet" href="https://cdn.datatables.net/2.0.8/css/dataTables.dataTables.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/5.0.0/css/fixedColumns.dataTables.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/2.0.8/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/5.0.0/js/dataTables.fixedColumns.js"></script>
</head>
<body>
<table id="demoTable" class="display" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>部门</th>
<th>岗位</th>
<th>入职日期</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张伟</td>
<td>技术部</td>
<td>前端工程师</td>
<td>2021-06-01</td>
<td>在职</td>
</tr>
<tr>
<td>2</td>
<td>李娜</td>
<td>产品部</td>
<td>产品经理</td>
<td>2020-03-15</td>
<td>在职</td>
</tr>
<tr>
<td>3</td>
<td>王强</td>
<td>设计部</td>
<td>UI设计师</td>
<td>2022-11-20</td>
<td>试用期</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function () {
$('#demoTable').DataTable({
scrollX: true,
scrollY: 300,
scrollCollapse: true,
paging: false,
fixedColumns: {
leftColumns: 2
}
});
});
</script>
</body>
</html>
这段代码运行时，表格宽度超过页面容器宽度时会出现横向滚动条，左侧的 ID 和姓名两列在滚动过程中始终保持可见。即便表格数据量增加、滚动范围变大，这两个列也会一直固定。滚动条出现在 DataTables 生成的滚动容器内，而不是浏览器窗口，这是 scrollX 的标准行为。
渲染完成后可以打开浏览器开发者工具检查 DOM 结构。会发现 DataTables 在原始表格之外生成了若干包裹节点，FixedColumns 插入了额外的表格用于渲染固定列。这些额外节点不需要手动干预，插件自身会同步列宽和行高。如果想确认固定列是否真的与主表格对齐，可以在不同屏幕宽度下缩放窗口观察。
常见坑点：列宽错位与固定列失效
列宽错位是 FixedColumns 使用中反馈最多的问题。表现为主表格列宽与固定列宽度不一致，固定列下方出现空白或挤压。最常见的原因是初始化时表格处于隐藏状态，例如放置在切换页签中，DataTables 无法在隐藏状态下正确计算列宽。解决办法是在表格显示后再调用 columns.adjust() 方法重新计算尺寸。
另一个容易忽略的问题是固定列必须设定明确的宽度。如果表格使用 autoWidth 自动计算列宽，在部分浏览器中固定列副本获取到的宽度可能与主表格不一致。更稳妥的做法是给需要固定的列直接设置 width 属性，或者在 DataTables 的 columnDefs 中指定宽度。例如：
$('#demoTable').DataTable({
scrollX: true,
fixedColumns: {
leftColumns: 2
},
columnDefs: [
{ targets: 0, width: '80px' },
{ targets: 1, width: '120px' }
],
autoWidth: false
});
设置了 autoWidth: false 之后，浏览器不再强制均分列宽，固定列副本能更准确地复制主表格的列宽设定。对于动态渲染数据的场景，如果修改了表格数据或列配置，需要调用 fixedColumns().relayout() 方法让插件重新计算布局。这个方法在 DataTables 1.10 以上的版本中均可使用。
还有一类问题表现为固定列不生效，即横向滚动时所有列都跟着滚动。排查时先确认脚本引入顺序是否正确。FixedColumns 是独立扩展，必须先加载 DataTables 主库，再加载 FixedColumns 脚本。同时检查初始化配置中是否误将 fixedColumns 写成了 fixedcolumn，这类大小写错误浏览器不会报错，但插件不会被激活。
如果把表格放在 CSS 的 overflow: hidden 容器中，滚动事件可能无法正确触发，FixedColumns 的同步机制也会受到干扰。确保表格的滚动容器是 DataTables 自己生成的那个 div，不要让外层父元素同时设置 overflow 属性。如果必须嵌套在特定布局中，可以用 CSS 将外层 overflow 设置为 visible 来规避。
动态数据与响应式布局的适配策略
Ajax 数据源加载完成后再初始化 FixedColumns 会遇到一个时序问题：数据到达时表格列宽尚未稳定，固定列可能无法对齐。解决思路是在数据加载完成后的回调函数中主动触发一次布局刷新。DataTables 提供了 initComplete 回调，这里是最稳妥的时机。
$('#demoTable').DataTable({
processing: true,
serverSide: true,
ajax: {
url: '/api/data',
type: 'POST'
},
scrollX: true,
fixedColumns: {
leftColumns: 1
},
initComplete: function () {
this.api().columns.adjust();
}
});
使用 serverSide 模式时，每次翻页或搜索都会重新加载数据，固定列可能出现短暂的样式跳动。这种情况建议在 drawCallback 中调用 fixedColumns().relayout()，确保每次数据重绘后固定列位置正确。如果数据量很大，可以适当增加 scrollY 高度并开启 deferRender 选项，减少初始渲染开销。
移动端适配时，固定列数不宜过多。手机屏幕宽度通常在 375 到 430 像素之间，固定两列后留给滚动区域的空间非常有限，用户每次滑动只能看到一列半的数据。根据实际业务场景，移动端固定一列就足够了。还可以结合 responsive 扩展来控制不同断点下哪些列显示哪些列隐藏，避免横向滚动距离过长。
对于列数特别多的情况，比如超过 15 列的宽表，建议为每个固定列设置合理的 min-width，防止内容过于拥挤。同时要检查 FixedColumns 生成的克隆表格是否会遮挡主体表格的排序图标，必要时通过 CSS 调整克隆表格的 z-index 层级。
与 DataTables 其他扩展的兼容性处理
FixedColumns 经常和 Buttons、Select、RowGroup 等扩展同时使用。与 Buttons 配合时，按钮工具栏默认插入在表格上方，不会影响固定列的布局。但如果启用了 fixedHeader，情况会复杂一些——固定表头和固定列同时工作时，需要保证两者的 z-index 值正确。FixedColumns 的克隆表格 z-index 默认较低，可能导致表头盖住固定列内容。
比较常见的解决方案是调整 CSS 优先级。DataTables 官方给出的参考值为：固定表头 z-index 为 3，FixedColumns 左侧固定列 z-index 为 2，主体表格 z-index 为 1。如果默认样式被覆盖，可以在自定义样式中明确指定这些层级关系。需要留意的是，z-index 修改要精确到 FixedColumns 生成的特定类名，随意提升层级可能引发其他元素遮挡问题。
Select 扩展允许用户点击行选中数据，启用后固定列区域同样可以触发选中事件。这是因为 FixedColumns 在生成克隆表格时复制了行结构，但事件监听仍然委托给 DataTables 主表格。如果发现固定列点击选中行为异常，优先检查是否在初始化后被其他脚本移除了事件委托。
RowGroup 扩展将行按指定字段分组，分组行会插入到表格数据中。此时固定列和分组行的对齐要求更高，建议先初始化 RowGroup 再初始化 FixedColumns，并调用一次 columns.adjust() 确保分组行渲染后列宽依然正确。如果分组数据动态更新，更新完成后同样需要重新调整布局。
性能优化与备选方案对比
FixedColumns 在表格行数非常多时可能产生渲染压力，因为每个固定列都对应一份完整的 DOM 克隆。一张 5000 行的表格，固定两列意味着额外渲染 10000 个单元格，这个开销不可忽视。页面出现明显卡顿或滚动不流畅时，建议开启 DataTables 的 deferRender 选项，它让 DataTables 只渲染视口内的行，滚动时再动态生成剩余行，能显著减少初始渲染耗时。
$('#demoTable').DataTable({
deferRender: true,
scrollX: true,
scrollY: 400,
scroller: true,
fixedColumns: {
leftColumns: 1
}
});
scroller 扩展配合 deferRender 使用，滚动时按需渲染行数据，内存占用和 DOM 节点数量都维持在较低水平。但注意 scroller 与 scrollY 必须同时设置，否则无法启用虚拟滚动机制。如果数据量超过 5 万行，虚拟滚动是不可或缺的优化手段。
除了 DataTables 生态内部的优化，也可以评估一下是否必须使用 FixedColumns。如果项目已经引入了其他 UI 框架如 Element Plus 或 Ant Design，它们的表格组件原生支持固定列功能。对于新项目而言，选择框架自带的表格方案往往比 DataTables 加插件组合更轻量。但对于存量系统或依赖 DataTables 丰富扩展能力的场景，FixedColumns 依然是最成熟的解决方案。
从实际维护角度看，FixedColumns 版本升级比较频繁，跟随 DataTables 主版本迭代。升级后注意检查样式文件是否同步更新，因为克隆表格的类名和布局算法可能发生变化。建议在升级计划中预留固定列功能回归测试的时间，避免样式错乱影响业务。
回到最初的场景：表格列多导致横向滚动，FixedColumns 让关键列始终可见。掌握初始化配置、列宽调整、动态刷新这几个要点，就能稳定实现预期效果。遇到列宽错位时优先考虑表格初始化时序和宽度设置，遇到性能瓶颈时借助虚拟滚动优化渲染。数据展示的本质是帮助用户快速定位信息，固定列只是手段，让表格在各类设备上都有清晰可读的呈现，才是最终目标。
实际项目中，可以将这套方案封装成一个通用的表格初始化函数，统一处理 scrollX、fixedColumns 和响应式参数，减少重复代码。遇到特殊的布局需求时，再基于这个基础函数扩展个性化配置，同时保证了维护效率与功能的统一性。
jQueryDataTableFixedColumns横向滚动修改时间：2026-08-19 08:00:33