通过将表格拆分为左右两个逻辑一体、视觉统一的独立表格，左侧表格包裹首列并设置水平滚动，右侧表格承载其余列且固定宽度，即可实现“仅第一列可水平滚动”的效果。
在标准 HTML 表格中，overflow-x: auto 无法直接作用于单个 <td> 或 <th> 单元格（尤其是当内容为内联文本、禁止换行时），也无法对某一列单独启用滚动。因此，真正的解决方案是结构层面的重构：用两个语义分离但视觉对齐的表格模拟“单表假象”。
✅ 实现步骤
-
拆分数据结构：将原表格按列拆为两部分
- 左表（.scrollable-col）：仅含第 1 列（如 name 或 description）
- 右表（.static-cols）：含第 2 列及之后所有列
-
同步表头与行高：
- 两表使用相同 table-layout: fixed + 显式 width，确保列宽严格对齐；
- 所有 <tr> 高度由左表驱动（右表 tr 需设 height: 100% 或 JS 同步）；
- 表头 <thead> 仅保留在左表（或双表均设，但右表 thead 隐藏首列）。
-
启用滚动并隐藏干扰样式：
立即学习“前端免费学习笔记（深入）”；
- 左表外层套 <div class="scroll-wrapper">，设 overflow-x: auto; white-space: nowrap;；
- 移除左表边框/间距，右表左侧 border 设为 none，视觉无缝衔接。
? 示例代码
<div class="table-container">
<!-- 左表：仅首列，支持水平滚动 -->
<div class="scroll-wrapper">
<table class="scrollable-col">
<thead>
<tr><th>Description</th></tr>
</thead>
<tbody>
<tr><td style="white-space: nowrap;">VeryLongUnbreakableProductNameThatExceedsContainerWidth</td></tr>
<tr><td style="white-space: nowrap;">AnotherExtremelyLengthyIdentifierWithoutSpacesOrHyphens</td></tr>
</tbody>
</table>
</div>
<!-- 右表：其余列，固定布局 -->
<table class="static-cols">
<thead>
<tr><th>Price</th><th>Status</th><th>Action</th></tr>
</thead>
<tbody>
<tr><td>$29.99</td><td>In Stock</td><td><button>Edit</button></td></tr>
<tr><td>$45.50</td><td>Out of Stock</td><td><button>Edit</button></td></tr>
</tbody>
</table>
</div>.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 无法实现的单列滚动需求——是企业级管理后台表格中经实践验证的成熟模式。
