本文介绍如何在 html 表格中实现“仅第一列可水平滚动”的效果，适用于长文本无法换行的场景；核心思路是将表格逻辑拆分为左右两个同步对齐的表格，左侧容器启用 `overflow-x: auto`，右侧固定宽度，通过 css 精确对齐模拟单表视觉效果。
在标准 HTML
| 或 | 单元格）。因此，需采用“视觉合成”策略：将原表格拆解为两个结构一致、行数严格对齐的表格——左表仅包含首列（描述列）并包裹在可横向滚动的容器中，右表包含其余所有列且保持静态。 以下是一个完整、可运行的实现示例：
配套 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;
}✅ 注意事项与最佳实践： 立即学习“前端免费学习笔记（深入）”；
|
|---|
