如何让jQuery DataTables的滚动条显示在tfoot标签下方？

问题原因分析 #

你遇到的滚动条出现在tfoot上方的情况，主要有两个原因：

• 布局逻辑限制：当同时启用scrollX和fixedColumns时，DataTables的默认布局会把水平滚动容器限定在<thead>和<tbody>所在的区域，<tfoot>会被独立放在滚动容器外部，导致滚动条刚好卡在页脚上方。
• 配置拼写错误：你的代码里写了Footer: true，但DataTables的正确配置项是小写的footer: true——这个拼写错误会让插件无法正确识别并处理页脚的布局规则，间接加重了位置异常的问题。

具体解决步骤 #

1. 修正配置项拼写错误

先把代码里的Footer: true改成footer: true，确保DataTables能正确识别页脚配置：

$(function() {
  var table = $('#example1').DataTable({
    scrollY: "400px",
    scrollX: true, // 建议设为true自动适配内容宽度，也可保留400px按需调整
    bPaginate: true,
    bLengthChange: true,
    bFilter: true,
    bSort: true,
    bInfo: true,
    paging: true,
    footer: true, // 修正为小写f
    fixedColumns: {
      leftColumns: 3,
      rightColumns: 0
    }
  });
});

2. 自定义CSS调整滚动布局

通过CSS修改滚动容器和页脚的位置关系，让滚动条显示在页脚下方：

/* 调整滚动容器的定位逻辑 */
.dataTables_scroll {
  position: relative;
}

/* 让页脚脱离固定定位，跟随滚动容器 */
.dataTables_scrollFoot {
  position: static;
  border-top: 1px solid #ddd; /* 可选：给页脚加边框区分内容区域 */
}

/* 确保滚动容器的水平滚动覆盖到页脚区域 */
.dataTables_scrollBody {
  overflow-x: auto;
}

如果使用fixedColumns后左侧固定列的页脚位置仍异常，可补充这段CSS：

/* 修正固定列页脚的位置 */
.DTFC_LeftFootWrapper {
  position: static;
  width: auto !important;
}

调整后，水平滚动条就会显示在页脚下方，同时保证固定列的布局正常。

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