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