HTML 表格中仅首列支持水平滚动的实现方案

以下是一个完整、可运行的实现示例：

  
  
    

      

        
Description
      
      

        
VeryLongProductNameThatCannotWrapAndMustStayInline
        
AnotherExtremelyLengthyIdentifierWithNoSpacesOrHyphens
        
YetOneMoreUnbreakableStringThatExceedsContainerWidth
      
    
  

  
  
    

      

        
Price
Stock
Status
      
      

        
$29.99
12
In Stock
        
$45.50
0
Out of Stock
        
$18.75
8
Preorder
      
    
  

配套 CSS（关键样式）：

.table-wrapper {
  display: flex;
  width: 100%;
  border-collapse: collapse;
}

.scrollable-col,
.static-cols {
  display: inline-block;
  vertical-align: top;
}

.scrollable-col {
  width: 200px; /* 首列期望显示宽度 */
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

.scrollable-col table,
.static-cols table {
  border-collapse: 
collapse;
  table-layout: fixed;
  width: 100%;
}

/* 确保左右表头/行高度严格对齐（重要！）*/
.left-table th,
.left-table td,
.right-table th,
.right-table td {
  padding: 8px 12px;
  border: 1px solid #ddd;
  text-align: left;
}

/* 固定右表各列宽度（提升对齐稳定性）*/
.right-table th:nth-child(1),
.right-table td:nth-child(1) { width: 80px; }
.right-table th:nth-child(2),
.right-table td:nth-child(2) { width: 60px; }
.right-table th:nth-child(3),
.right-table td:nth-child(3) { width: 100px; }

/* 滚动时隐藏左表横向滚动条（可选，提升美观）*/
.scrollable-col::-webkit-scrollbar {
  display: none;
}
.scrollable-col {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

✅ 注意事项与最佳实践：

立即学习“前端免费学习笔记（深入）”；

• 行高必须严格一致：左右两表的