Datatables双表头固定列问题：如何让首列两个表头均固定

问题说明 #

使用双表头的Datatables表格，需求是固定首列，其余列支持横向滚动。当前遇到的问题是：第二个表头的首列能正常固定，但第一个表头的首列会随滚动覆盖第二列，需要让首列的两个表头都保持固定。

解决方案 #

Datatables的FixedColumns插件默认仅自动固定最后一行表头的指定列，针对双表头场景，需要通过自定义CSS修正第一行表头首列的定位逻辑，确保它跟随固定列保持不动。

核心调整 #

1. 保留原FixedColumns配置left:1，确保首列数据行和第二行表头固定。
2. 添加自定义CSS，为第一行表头的首列设置固定定位，并调整层级避免被覆盖。

修改后的完整代码 #

JavaScript #

$(document).ready(function() {
    var table = $('#example').DataTable({
        paging: true,
        scrollY: "300px",
        scrollX: true,
        scrollCollapse: true,
        fixedColumns: {
          left: 1
        }
    });
});

HTML #

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.datatables.net/fixedcolumns/4.1.0/css/fixedColumns.dataTables.min.css"
    />

    <script
      type="text/javascript"
      src="https://cdn.datatables.net/fixedcolumns/4.1.0/js/dataTables.fixedColumns.min.js"
    ></script>

    <style>
      /* 修正双表头首列固定样式 */
      .DTFC_LeftHeadWrapper table thead tr:first-child th:first-child {
        position: fixed !important;
        left: 0;
        z-index: 103;
        box-sizing: border-box;
      }
      .DTFC_LeftBodyWrapper {
        z-index: 101;
      }
      .DTFC_LeftHeadWrapper table thead tr:nth-child(2) th:first-child {
        z-index: 102;
      }
    </style>

    <meta charset="utf-8" />
    <title>DataTables - 双表头首列固定示例</title>
  </head>

  <body>
    <table id="example" class="cell-border row-border stripe dataTable no-footer dtr-inline" role="grid">
      <thead>
        <tr>
          <th>&nbsp;</th>
          <th>&nbsp;</th>
          <th colspan="3" style="white-space: nowrap;">Col1</th>
          <th colspan="3" style="white-space: nowrap;">Col2</th>
          <th colspan="3" style="white-space: nowrap;">Col3</th>
          <th colspan="3" style="white-space: nowrap;">Col4</th>
          <th>Col5</th>
        </tr>
        <tr>
          <th style="background-color: lightgray; width: 220px; min-width: 220px; text-align: left;">Test1</th>
          <th style="background-color: lightgray;">Test2</th>
          <th>Test3</th>
          <th>Test4</th>
          <th>Test5</th>
          <th>Test6</th>
          <th>Test7</th>
          <th>Test8</th>
          <th>Test9</th>
          <th>Test10</th>
          <th>Test11</th>
          <th>Test12</th>
          <th>Test13</th>
          <th>Test14</th>
          <th>&nbsp;</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>One</td>
          <td><strong>John</strong></td>
          <td><strong>Yes</strong></td>
          <td style="text-align: center;">&nbsp;</td>
          <td style="text-align: center;">&nbsp;</td>
          <td style="text-align: center;">&nbsp;</td>
          <td style="text-align: center;">&nbsp;</td>
          <td style="text-align: center;">&nbsp;</td>
          <td style="text-align: center;">&nbsp;</td>
          <td style="text-align: center;">&nbsp;</td>
          <td style="text-align: center;">&nbsp;</td>
          <td style="text-align: center;">&nbsp;</td>
          <td style="text-align: center;">&nbsp;</td>
          <td style="text-align: center;">&nbsp;</td>
          <td style="text-align: center;">&nbsp;</td>
        </tr>
        <tr>
          <td>Two</td>
          <td><strong>Julie</strong></td>
          <td><strong>Yes</strong></td>
          <td><strong>Yes</strong></td>
          <td style="text-align: center;">&nbsp;</td>
          <td style="text-align: center;">&nbsp;</td>
          <td style="text-align: center;">&nbsp;</td>
          <td style="text-align: center;">&nbsp;</td>
          <td style="text-align: center;">&nbsp;</td>
          <td style="text-align: center;">&nbsp;</td>
          <td style="text-align: center;">&nbsp;</td>
          <td style="text-align: center;">&nbsp;</td>
          <td style="text-align: center;">&nbsp;</td>
          <td style="text-align: center;">&nbsp;</td>
          <td style="text-align: center;">&nbsp;</td>
        </tr>
        <tr>
          <td>Three</td>
          <td><strong>Joe</strong></td>
          <td style="text-align: center;">&nbsp;</td>
          <td><strong>Yes</strong></td>
          <td><strong>Yes</strong></td>
          <td style="text-align: center;">&nbsp;</td>
          <td style="text-align: center;">&nbsp;</td>
          <td style="text-align: center;">&nbsp;</td>
          <td style="text-align: center;">&nbsp;</td>
          <td style="text-align: center;">&nbsp;</td>
          <td style="text-align: center;">&nbsp;</td>
          <td style="text-align: center;">&nbsp;</td>
          <td style="text-align: center;">&nbsp;</td>
          <td style="text-align: center;">&nbsp;</td>
          <td style="text-align: center;">&nbsp;</td>
        </tr>
        <tr>
          <td>Four</td>
          <td><strong>Shiny</strong></td>
          <td><strong>Yes</strong></td>
          <td><strong>Yes</strong></td>
          <td><strong>Yes</strong></td>
          <td style="text-align: center;">&nbsp;</td>
          <td style="text-align: center;">&nbsp;</td>
          <td style="text-align: center;">&nbsp;</td>
          <td style="text-align: center;">&nbsp;</td>
          <td style="text-align: center;">&nbsp;</td>
          <td style="text-align: center;">&nbsp;</td>
          <td style="text-align: center;">&nbsp;</td>
          <td style="text-align: center;">&nbsp;</td>
          <td style="text-align: center;">&nbsp;</td>
          <td style="text-align: center;">&nbsp;</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

效果说明 #

• 通过DTFC_LeftHeadWrapper（FixedColumns生成的固定列容器）定位第一行表头的首列，设置固定位置和更高层级，确保它不会随横向滚动移动。
• 调整各元素的z-index值，避免固定表头被其他内容覆盖，保证双表头首列都能稳定固定。

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