Datatables固定前两列横向滚动时列重叠问题求助

问题描述 #

使用Datatables创建表格并固定前2列时，横向滚动出现列重叠问题（Capacity列与Equipment Name列重叠）；移除固定列配置后表格滚动正常。以下是原始代码：

原始HTML代码 #

<style>
  .bg-dark {
    background-color: #2980b9 !important;
  }

  .thead-dark th {
    background-color: #2980b9 !important;
  }

  body {
    font-family: 'Nunito Sans', sans-serif;
  }

  .table td,
  .table th {
    height: 1em;
    font-size: 12px !important;
    padding: 5px 5px;
  }

  .table-scroll {
    overflow-x: scroll;
  }
</style>

<div class="card-body">
  <div class="table-responsive">
    <table class="table dataTable table-striped table-bordered" id="equipmentCostData">
      <thead class="thead-dark">
        <tr>
          <th>OPCO</th>
          <th>Equipment Name</th>
          <th>Capacity</th>
          <th>Annual<br/> Distance</th>
          <th>Equipment <br/> Price</th>
          <th>Tyre Type</th>
          <th>Tyre <br/> Count</th>
          <th>Finance<br/> Fleet %</th>
          <th>Target <br/> Profit %</th>
          <th>Loan <br/> Amount %</th>
          <th>Interest <br/> Rate %</th>
          <th>Loan<br/> Years</th>
          <th>Amortization <br/> Years</th>
          <th>Residual<br/> Value</th>
          <th>Maintenance Cost/Unit <br/> Distance</th>
          <th> Tax </th>
          <th>Insurance</th>
          <th>Admin <br/> Cost</th>
          <th>Other Cost <br/> (Misc.)</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        {% for e in equipment %}
        <tr id="{{e.id}}">
          <td>{{e.opco_id__opco_name}}</td>
          <td>{{e.equipment_name}}</td>
          <td>{{e.capacity}}</td>
          <td>{{e.annual_distance}}</td>
          <td>{{e.cost}}</td>
          <td>{{e.tyre_type_id__tyre_type}}</td>
          <td>{{e.tyre_count}}</td>
          <td{{e.finance_fleet}}</td>
          <td>{{e.target_profit}}</td> 
          <td>{{e.loan_amount}}</td> 
          <td>{{e.interest_rate}}</td>
          <td>{{e.loan_years}}</td>
          <td>{{e.amotization_years}}</td>
          <td>{{e.residual_value}}</td>
          <td>{{e.maintenance_cost_per_unit_distance}}</td>
          <td>{{e.tax}}</td>
          <td>{{e.insurance}}</td>
          <td>{{e.admin_cost}}</td>
          <td>{{e.other_cost}}</td>
          <td> 
            <i class='fa fa-edit editBtn' style="cursor: pointer;"></i>
            <i class='fa fa-trash pl-3 deleteBtn' style="cursor: pointer;"></i>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

原始JavaScript代码 #

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<!-- <script type="text/javascript" src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script> -->
<script
  type="text/javascript"
  src="{% static 'js/jquery.datatables.min.js' %}"
></script>

<script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/4.2.2/js/dataTables.fixedColumns.min.js"></script>   
<script>
  $(document).ready(function () {
    var table = $("#equipmentCostData").DataTable({ 
      fixedColumns: true,
      fixedColumns: {
        left: 2,
        right: 0
      },
      
      responsive: true,
    });
  });
</script>

解决步骤及修正代码 #

核心问题分析 #

1. 插件兼容性冲突：responsive: true选项与FixedColumns插件逻辑冲突，Responsive会动态调整列显示，干扰固定列的定位计算。
2. 缺失必要CSS：未引入FixedColumns的CSS文件，导致固定列的定位、宽度计算异常。
3. 自定义样式异常：固定的height:1em可能导致列内容溢出，影响列宽计算。
4. HTML语法错误：<td{{e.finance_fleet}}</td>缺少闭合符号，导致表格结构异常。

修正后的代码 #

修正后的HTML（添加必要CSS+修复语法错误）

<!-- 新增FixedColumns的CSS文件 -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/4.2.2/css/fixedColumns.dataTables.min.css"/>

<style>
  .bg-dark {
    background-color: #2980b9 !important;
  }

  .thead-dark th {
    background-color: #2980b9 !important;
  }

  body {
    font-family: 'Nunito Sans', sans-serif;
  }

  .table td,
  .table th {
    /* 去掉固定高度，改用最小高度避免内容溢出 */
    min-height: 1em;
    font-size: 12px !important;
    padding: 5px 5px;
  }

  .table-scroll {
    overflow-x: scroll;
  }
</style>

<div class="card-body">
  <div class="table-responsive">
    <table class="table dataTable table-striped table-bordered" id="equipmentCostData">
      <thead class="thead-dark">
        <tr>
          <th>OPCO</th>
          <th>Equipment Name</th>
          <th>Capacity</th>
          <th>Annual<br/> Distance</th>
          <th>Equipment <br/> Price</th>
          <th>Tyre Type</th>
          <th>Tyre <br/> Count</th>
          <th>Finance<br/> Fleet %</th>
          <th>Target <br/> Profit %</th>
          <th>Loan <br/> Amount %</th>
          <th>Interest <br/> Rate %</th>
          <th>Loan<br/> Years</th>
          <th>Amortization <br/> Years</th>
          <th>Residual<br/> Value</th>
          <th>Maintenance Cost/Unit <br/> Distance</th>
          <th> Tax </th>
          <th>Insurance</th>
          <th>Admin <br/> Cost</th>
          <th>Other Cost <br/> (Misc.)</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        {% for e in equipment %}
        <tr id="{{e.id}}">
          <td>{{e.opco_id__opco_name}}</td>
          <td>{{e.equipment_name}}</td>
          <td>{{e.capacity}}</td>
          <td>{{e.annual_distance}}</td>
          <td>{{e.cost}}</td>
          <td>{{e.tyre_type_id__tyre_type}}</td>
          <td>{{e.tyre_count}}</td>
          <!-- 修复语法错误 -->
          <td>{{e.finance_fleet}}</td>
          <td>{{e.target_profit}}</td> 
          <td>{{e.loan_amount}}</td> 
          <td>{{e.interest_rate}}</td>
          <td>{{e.loan_years}}</td>
          <td>{{e.amotization_years}}</td>
          <td>{{e.residual_value}}</td>
          <td>{{e.maintenance_cost_per_unit_distance}}</td>
          <td>{{e.tax}}</td>
          <td>{{e.insurance}}</td>
          <td>{{e.admin_cost}}</td>
          <td>{{e.other_cost}}</td>
          <td> 
            <i class='fa fa-edit editBtn' style="cursor: pointer;"></i>
            <i class='fa fa-trash pl-3 deleteBtn' style="cursor: pointer;"></i>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

修正后的JavaScript（移除冲突选项+合并冗余配置）

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script
  type="text/javascript"
  src="{% static 'js/jquery.datatables.min.js' %}"
></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/4.2.2/js/dataTables.fixedColumns.min.js"></script>   
<script>
  $(document).ready(function () {
    var table = $("#equipmentCostData").DataTable({ 
      // 合并冗余的fixedColumns配置
      fixedColumns: {
        left: 2,
        right: 0
      },
      // 移除与FixedColumns冲突的responsive选项
      // responsive: true,
    });
  });
</script>

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