如何实现 HTML 表格中仅首列支持水平滚动

通过将表格拆分为左右两个逻辑一体、视觉统一的独立表格，左侧表格包裹首列并设置水平滚动，右侧表格承载其余列且固定宽度，即可实现“仅第一列可水平滚动”的效果。

在标准 html 表格中，overflow-x: auto 无法直接作用于单个

或 单元格（尤其是当内容为内联文本、禁止换行时），也无法对某一列单独启用滚动。因此，真正的解决方案是结构层面的重构：用两个语义分离但视觉对齐的表格模拟“单表假象”。

✅ 实现步骤

1. 拆分数据结构：将原表格按列拆为两部分

   • 左表（.scrollable-col）：仅含第 1 列（如 name 或 description）
   • 右表（.Static-cols）：含第 2 列及之后所有列

2. 同步表头与行高：

   • 两表使用相同 table-layout: fixed + 显式 width，确保列宽严格对齐；
   • 所有
     高度由左表驱动（右表 tr 需设 height: 100% 或 js 同步）；

   • 表头 仅保留在左表（或双表均设，但右表 thead 隐藏首列）。

   • 启用滚动并隐藏干扰样式：

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

     • 左表外层套
       ，设 overflow-x: auto; white-space: nowrap;；

     • 移除左表边框/间距，右表左侧 border 设为 none，视觉无缝衔接。

     ? 示例代码

           
          
            
              
     Description
            
            
              
     VeryLongUnbreakableProductNameThatExceedsContainerWidth
              
     AnotherExtremelyLengthyIdentifierWithoutSpacesOrHyphens
            
          
        
            
          
            
     Price
     Status
     Action
          
          
            
     $29.99
     In Stock
     Edit
            
     $45.50
     Out of Stock
     Edit
          
        
      

     .table-container {   display: flex;   gap: 0;   border: 1px solid #ddd; }  .scroll-wrapper {   overflow-x: auto;   overflow-y: hidden;   flex: 0 0 300px; /* 首列建议最小宽度 */   max-width: 300px; }  .scrollable-col, .static-cols {   table-layout: fixed;   border-collapse: collapse;   font-size: 14px; }  .scrollable-col th, .scrollable-col td, .static-cols th, .static-cols td {   padding: 8px 12px;   border: 1px solid #eee;   vertical-align: middle; }  /* 隐藏左表右侧边框 & 右表左侧边框，实现无缝 */ .scrollable-col td, .scrollable-col th {   border-right: none; } .static-cols td, .static-cols th {   border-left: none; }  /* 右表固定列宽（需与左表高度严格对齐） */ .static-cols {   flex: 1;   min-width: 400px; } .static-cols th:nth-child(1) { width: 100px; } .static-cols th:nth-child(2) { width: 120px; } .static-cols th:nth-child(3) { width: 100px; }

     ⚠️ 注意事项

     • 响应式适配：在小屏下建议改用 flex-direction: column 布局，或切换为卡片视图，避免横向滚动体验差；
     • 可访问性：两个表格需通过 aria-labelledby 或 role=”presentation” 明确语义关系，避免屏幕阅读器误读为两个独立数据集；
     • 动态内容：若行数动态增删，需用 javaScript 同步两表 tbody tr 数量与高度（尤其当内容高度不一致时）；
     • 替代方案权衡：css display: grid + overflow 虽灵活，但复杂表头/跨行场景兼容性弱；本方案兼容 IE11+，稳定可靠。

     该方法本质是“以结构换功能”，牺牲了语义纯粹性，却在不依赖 JS 框架的前提下，精准解决了纯 CSS 无法实现的单列滚动需求——是企业级管理后台表格中经实践验证的成熟模式。