Datatables仅特定列实现水平滚动的方案咨询

嘿，我之前帮人解决过这个需求，刚好能给你靠谱的方案！要实现Datatables固定前两列、其余列水平滚动的效果，不用瞎找野路子，官方的fixedColumns扩展就能完美搞定，结合你已经在用的scrollX选项就行。下面是具体的实现方法：

1. 准备必要的资源 #

确保你已经引入了Datatables核心库，以及fixedColumns扩展对应的JS和CSS文件（这些都是官方提供的配套资源，和你用scrollX时的资源是一套体系的）。

2. 初始化表格的配置 #

在初始化Datatables时，同时开启scrollX和fixedColumns配置，指定要固定的左侧列数：

$(document).ready(function() {
  $('#yourTable').DataTable({
    scrollX: true, // 开启整体水平滚动
    fixedColumns: {
      left: 2 // 固定最左侧的2列
    },
    // 其他常规配置按需添加
    paging: true,
    ordering: true,
    searching: true
  });
});

3. 容器样式配置 #

为了让水平滚动正常触发，建议给表格的外层容器设置一个固定宽度或者最大宽度，同时开启横向溢出滚动：

<div style="width: 900px; overflow-x: auto;">
  <table id="yourTable" class="display" style="width:100%">
    <thead>
      <tr>
        <th>固定列A</th>
        <th>固定列B</th>
        <th>滚动列1</th>
        <th>滚动列2</th>
        <th>滚动列3</th>
        <th>滚动列4</th>
        <!-- 更多列可以继续添加 -->
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>固定内容1</td>
        <td>固定内容2</td>
        <td>滚动内容1</td>
        <td>滚动内容2</td>
        <td>滚动内容3</td>
        <td>滚动内容4</td>
      </tr>
      <!-- 更多数据行 -->
    </tbody>
  </table>
</div>

效果说明 #

当表格内容超出容器宽度时，拖动底部的水平滚动条，你会发现前两列始终固定在左侧不动，后面的列会跟随滚动条左右移动，完全符合你要的需求。

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