如何在jQuery DataTable中隐藏垂直滚动条（保留滚动功能）

我之前也踩过一模一样的坑——直接用CSS隐藏滚动条后，容器宽度莫名变宽，整个布局都乱了。下面给你两个亲测有效的解决方案，按需选就行：

方案一：嵌套容器法（全浏览器兼容） #

这个方法的核心是把滚动条“藏”在父容器的可视区域外，既保留滚动功能，又完全不会影响容器宽度：

1. 先给你的DataTable套一个外层容器：

<div class="dt-scroll-wrapper">
  <table id="your-table-id"></table>
</div>

2. 编写对应的CSS：

/* 外层容器：隐藏溢出内容，设置你需要的固定高度 */
.dt-scroll-wrapper {
  overflow: hidden;
  height: 400px; /* 和DataTable的scrollY值保持一致 */
}

/* DataTable的滚动容器：让它比外层容器宽17px（默认滚动条宽度），把滚动条推到容器外 */
.dataTables_scrollBody {
  width: calc(100% + 17px);
  overflow-y: scroll;
}

3. 正常初始化DataTable并开启垂直滚动：

$('#your-table-id').DataTable({
  scrollY: '400px',
  scrollCollapse: true,
  paging: false /* 可选，根据你的需求调整 */
});

这个方案完全兼容所有浏览器，不会有任何布局偏移的问题。

方案二：CSS原生隐藏滚动条（简洁高效，现代浏览器适用） #

如果你的项目只需要兼容Chrome、Edge、Firefox等现代浏览器，直接用CSS的滚动条隐藏属性更省事，不需要修改HTML结构：

/* 针对Webkit内核浏览器（Chrome、Edge） */
.dataTables_scrollBody::-webkit-scrollbar {
  display: none;
}

/* 针对Firefox */
.dataTables_scrollBody {
  scrollbar-width: none;
}

/* 针对IE/Edge旧版本（可选） */
.dataTables_scrollBody {
  -ms-overflow-style: none;
}

然后正常初始化DataTable即可：

$('#your-table-id').DataTable({
  scrollY: '400px',
  scrollCollapse: true
});

这个方法的原理是只隐藏滚动条的视觉表现，保留它原本占用的布局空间，所以不会出现父容器宽度被撑开的问题。

为啥你之前的方法会失效？ #

大概率是你用了overflow-y: hidden这类属性——它不仅隐藏了滚动条，还直接禁用了滚动功能；或者错误地调整了容器宽度，导致滚动条的空间被释放，进而让父容器宽度被内容撑开。上面的两个方案都完美避开了这个问题~

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