Bootstrap 4 + DataTables固定列时重复出现水平滚动条问题排查

我仔细看了你的代码，发现几个核心问题导致了滚动条重复和内容透出的异常，咱们一步步来修复：

1. 使用了不兼容的jQuery版本 #

你当前用的是jquery-3.3.1.slim.min.js，这个精简版移除了DataTables（尤其是FixedColumns插件）依赖的核心功能（比如拖拽事件处理、ajax模块），这会直接导致插件运行逻辑混乱，出现滚动条重复、内容透出这类渲染bug。

2. 缺少DataTables的Bootstrap 4适配JS文件 #

你只引入了DataTables核心JS和FixedColumns插件，但没加载dataTables.bootstrap4.min.js——这个文件是专门用来让DataTables和Bootstrap 4的样式、布局完全兼容的，缺少它会引发样式冲突，比如重复创建滚动容器。

3. 可选优化：明确滚动区域配置 #

FixedColumns和scrollX配合使用时，建议给表格设置固定的scrollY高度，帮助插件更准确地计算固定列和滚动区域的边界，避免布局计算混乱。

修正后的完整代码 #

<!-- 样式文件加载顺序：Bootstrap → DataTables Bootstrap 4 → FixedColumns Bootstrap 4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/fixedcolumns/3.2.4/css/fixedColumns.bootstrap4.min.css" rel="stylesheet" />

<div class="container mt-4">
  <table id="tabla" class="table table-striped table-bordered nowrap" style="width:100%">
    <thead>
      <tr>
        <th>Código Delfos</th>
        <th>Nota de Venta</th>
        <th>Primer Cliente</th>
        <th>Norma</th>
        <th>Potencia</th>
        <th>Tensión Mayor</th>
        <th>Tensión Menor</th>
        <th>Material de arrollamiento mayor</th>
        <th>Material de arrollamiento menor</th>
        <th>Frecuencia</th>
        <th>Grupo de Conexiones</th>
        <th>Regulación</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>07-F0CAAEUAFEJ0000B0001</td>
        <td>11756</td>
        <td>DIR.PROV.ENERGIA DE CORRIENTES</td>
        <td>IRAM 2476</td>
        <td>630,00</td>
        <td>33.000</td>
        <td>13.860</td>
        <td>datos</td>
        <td>datos</td>
        <td>datos</td>
        <td>datos</td>
        <td>33000,00( + 5x5,0000% ; - 5x5,00%)</td>
      </tr>
    </tbody>
  </table>
</div>

<!-- JS加载顺序：完整版jQuery → Popper → Bootstrap → DataTables核心 → DataTables Bootstrap 4适配 → FixedColumns -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.2.4/js/dataTables.fixedColumns.min.js"></script>

<script>
$(document).ready(function() {
  var table = $('#tabla').DataTable({
    scrollX: true,
    scrollY: "400px", // 明确设置滚动高度，帮助FixedColumns计算布局
    paging: false,
    fixedColumns: {
      leftColumns: 1,
      rightColumns: 1
    }
  });
});
</script>

关键修复点说明 #

• 替换jQuery版本：把slim版换成完整版jQuery，确保插件依赖的所有功能都能正常运行。
• 添加Bootstrap适配JS：引入dataTables.bootstrap4.min.js，消除DataTables和Bootstrap的样式冲突，避免重复生成滚动条。
• 严格遵循加载顺序：JS文件必须按「jQuery → Bootstrap相关 → DataTables核心 → 适配插件 → FixedColumns」的顺序加载，否则会出现初始化错误。
• 设置固定滚动高度：给scrollY指定具体值，帮助FixedColumns准确划分固定列和滚动区域，减少内容透出的概率。

内容的提问来源于stack exchange，提问作者Juan Salvador Portugal