如何在垂直表头的jQuery DataTable中固定首行与首列？

针对你当前垂直表头DataTable的需求，我们可以通过调整CSS定位和容器布局来实现垂直滚动时固定前两行，以下是具体修改方案：

修改后的完整代码 #

CSS 部分 #

.dataTable { 
  display: block; 
  width: 100%; 
  max-height: 400px; /* 设置表格最大高度，触发垂直滚动 */
  overflow-y: auto;
}

.dataTable thead { 
  display: block; 
  position: sticky;
  left: 0;
  top: 0;
  z-index: 10;
}

.dataTable thead tr { 
  display: flex; 
  flex-direction: column;
}

.dataTable thead th { 
  flex-grow: 1; 
  width: 140px !important; 
  height: 80px; 
  box-sizing: border-box; 
  color: #fff; 
  border: unset; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  font-weight: bold; 
  background-color: #65696b;
}

/* 固定前两个表头行 */
.dataTable thead th:nth-child(1),
.dataTable thead th:nth-child(2) {
  position: sticky;
  top: 0;
  z-index: 11;
}
.dataTable thead th:nth-child(2) {
  top: 80px; /* 第一个表头高度80px，第二个顶部位移对应高度 */
}

.dataTable tbody { 
  display: flex; 
  width: calc(100% - 140px); /* 减去左侧表头宽度 */
  overflow-x: scroll;
  position: absolute;
  left: 140px;
  top: 0;
  max-height: 400px;
  overflow-y: auto;
}

.dataTable tbody tr { 
  display: block; 
  box-sizing: border-box; 
}

.dataTable tbody td { 
  display: block; 
  height: 80px; 
  width: 100px; 
  position: relative; 
  box-sizing: border-box;
  border-bottom: 1px solid #f2e7e7f5;
}

/* 固定前两个数据行的第一列 */
.dataTable tbody tr:nth-child(1) td:first-child,
.dataTable tbody tr:nth-child(2) td:first-child {
  position: sticky;
  left: -140px; /* 对应左侧表头宽度 */
  z-index: 9;
  background-color: #fff;
}
.dataTable tbody tr:nth-child(2) td:first-child {
  top: 80px;
}

HTML 部分 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.js"></script>
<script src="https://gyrocode.github.io/jquery-datatables-pageLoadMore/1.0.2/js/dataTables.pageLoadMore.min.js"></script>
<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
      <th>Country</th>
      <th>Town</th>
      <th>School</th>
      <th>Degree</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>UK</td>
      <td>London</td>
      <td>Lorem</td>
      <td>Phd</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
      <td>UK</td>
      <td>London</td>
      <td>Lorem</td>
      <td>Phd</td>
    </tr>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>UK</td>
      <td>London</td>
      <td>Lorem</td>
      <td>Phd</td>
    </tr>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>UK</td>
      <td>London</td>
      <td>Lorem</td>
      <td>Phd</td>
    </tr>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>UK</td>
      <td>London</td>
      <td>Lorem</td>
      <td>Phd</td>
    </tr>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>UK</td>
      <td>London</td>
      <td>Lorem</td>
      <td>Phd</td>
    </tr>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>UK</td>
      <td>London</td>
      <td>Lorem</td>
      <td>Phd</td>
    </tr>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>UK</td>
      <td>London</td>
      <td>Lorem</td>
      <td>Phd</td>
    </tr>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>UK</td>
      <td>London</td>
      <td>Lorem</td>
      <td>Phd</td>
    </tr>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>UK</td>
      <td>London</td>
      <td>Lorem</td>
      <td>Phd</td>
    </tr>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>UK</td>
      <td>London</td>
      <td>Lorem</td>
      <td>Phd</td>
    </tr>
  </tbody>
</table>
<script>
$(function() {
  $('#example').DataTable({
    paging: false, // 禁用分页，方便测试垂直滚动
    scrollY: "400px"
  });
});
</script>

关键修改说明 #

1. 容器布局调整：给.dataTable设置max-height和overflow-y: auto触发垂直滚动；将tbody定位到表头右侧，避免布局重叠。
2. 表头固定：使用position: sticky固定前两个表头行，通过top属性设置第二个表头的偏移量，确保和第一个表头无缝衔接。
3. 数据行固定：对tbody前两行的第一列设置position: sticky，通过left: -140px偏移到左侧表头位置，同时设置背景色避免被滚动内容覆盖。
4. 层级控制：通过z-index调整固定元素的层级，确保表头始终在数据行上方。

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