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

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

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

✅ 实现步骤

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

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

2. 同步表头与行高：

   • 两表使用相同 table-layout: fixed + 显式 width，确保列宽严格对齐；
   • 所有 高度由左表驱动（右表 tr 需设 height: 100% 或 JS 同步）；
   • 表头 仅保留在左表（或双表均设，但右表 thead 隐藏首列）。

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

     

     ImgGood

     免费在线AI照片编辑器

     下载

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

     • 左表外层套
       ，设 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 无法实现的单列滚动需求——是企业级管理后台表格中经实践验证的成熟模式。