在解决此问题之前，我们需要了解 Sticky Header（固定表头）是如何工作的。Sticky Header 通过在表格的头部创建一个具有固定位置的元素，来将表格的头部保持在屏幕上可见，即使用户向下滚动页面。然而，当表格中存在合并单元格时，该元素不能正确地显示，并且头部将不再固定。

为解决这个问题，我们可以使用 JavaScript 来检测表格中的合并单元格，并在 Sticky Header 元素中创建相应的固定单元格。以下是一个示例代码，可以用于实现具有合并单元格的固定表头。

HTML：

  

    

      
Header 1 & 2
      
Header 3
      
Header 4
    
  
  

    

      
1
      
2
      
3
      
4
    
    

      
5
      
6
      
7
    
    

      
8
      
9
      
10
      
11
    
  

CSS：

table {
  border-collapse: collapse;
}

thead {
  position: sticky;
  top: 0;
  background-color: #fff;
}

th,
td {
  border: 1px solid #ccc;
  padding: 6px 10px;
}

th[colspan],
td[colspan] {
  background-color: #eee;
}

JavaScript：

var table = document.querySelector('table');
var ths