水平分页是指将表格内容在水平方向上进行分页展示，当表格内容超过页面宽度时，自动换行展示。

以下是一个示例代码，演示了如何通过CSS和JavaScript实现表格的水平分页。

HTML代码：

  

    

      

        
Header 1
        
Header 2
        
Header 3
        
Header 4
        
Header 5
        
Header 6
        
Header 7
        
Header 8
        
Header 9
        
Header 10
      
    
    

      

        
Data 1
        
Data 2
        
Data 3
        
Data 4
        
Data 5
        
Data 6
        
Data 7
        
Data 8
        
Data 9
        
Data 10
      
      
    
  

CSS代码：

#tableContainer {
  width: 500px; /* 设置表格容器宽度 */
  overflow-x: auto; /* 水平滚动条出现时自动显示 */
}

#myTable {
  min-width: 100%; /* 设置表格最小宽度为100% */
  white-space: nowrap; /* 防止单元格换行 */
}

#myTable th, #myTable td {
  padding: 8px; /* 设置单元格内边距 */
}

JavaScript代码（使用jQuery库）：

$(document).ready(function() {
  // 当窗口大小改变时重新调整表格宽度
  $(window).resize(function() {
    adjustTableWidth();
  });
  
  function adjustTableWidth() {
    var containerWidth = $("#tableContainer").width();
    var tableWidth = $("#myTable").width();
    
    if (containerWidth < tableWidth) {
      // 表格宽度超出容器宽度，设置表格宽度为容器宽度
      $("#myTable").css("width", containerWidth + "px");
    } else {
      // 表格宽度小于容器宽度，设置表格宽度为自动（恢复默认宽度）
      $("#myTable").css("width", "auto");
    }
  }
  
  // 初始调整表格宽度
  adjustTableWidth();
});

上述代码通过设置表格容器的宽度和水平滚动条样式，使得表格内容超过容器宽度时自动换行展示。通过JavaScript代码，实现了在窗口大小改变时自动调整表格宽度，确保表格始终适应容器宽度。