本文介绍如何在 html 表格中实现“仅第一列可水平滚动”的效果，适用于长文本无法换行的场景；核心思路是将表格逻辑拆分为左右两个同步对齐的表格，左侧容器启用 `overflow-x: auto`，右侧固定宽度，通过 css 精确对齐模拟单表视觉效果。
在标准 html
中，无法直接为某一列设置独立的滚动行为（overflow 属于块级容器属性，不作用于
| 或 |
单元格）。因此，需采用“视觉合成”策略：将原表格拆解为两个结构一致、行数严格对齐的表格——左表仅包含首列（描述列）并包裹在可横向滚动的容器中，右表包含其余所有列且保持静态。
以下是一个完整、可运行的实现示例：
| 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; }
✅ 注意事项与最佳实践：
立即学习“前端免费学习笔记（深入）”；
- 行高必须严格一致：左右两表的
高度需完全相同（推荐使用 line-height + padding 控制，避免依赖内容自动撑高）；
- 表头需同步冻结：若需固定表头，需分别对左右两个
应用 position: sticky，并确保 z-index 和 top 值一致；
- 响应式适配：在小屏下建议改用 display: block + flex-direction: column 布局，或切换为卡片式展示；
- 无障碍访问：需为左右两表添加 aria-labelledby 或 aria-describedby 关联说明，避免屏幕阅读器误判为两个独立表格；
- javaScript 同步（进阶）：当动态增删行时，务必保证左右表 dom 操作同步执行，推荐封装为统一的 appendRow(data) 方法。
该方案兼容所有现代浏览器（chrome/firefox/safari/edge），无需第三方库，语义清晰、性能可控，是解决“单列独立滚动”需求最稳健的纯 CSS+HTML 方案。
|