本文详解如何突破 HTML 表格默认的“最小列宽由内容决定”的限制，通过 CSS 定位与尺寸控制实现列自由缩放至任意宽度（包括小于内容宽度），并配合 text-overflow: ellipsis 安全显示省略号。
本文详解如何突破 html 表格默认的“最小列宽由内容决定”的限制，通过 css 定位与尺寸控制实现列自由缩放至任意宽度（包括小于内容宽度），并配合 `text-overflow: ellipsis` 安全显示省略号。
在原生 HTML 表格中，<th> 和 <code><td> 的宽度受其内部内容（尤其是最长文本或内联元素）的固有尺寸约束——即使显式设置 <code>width 或 max-width，浏览器仍会优先保障内容可读性，导致列无法真正缩小到内容宽度以下。这是表格渲染引擎（table-layout: auto 默认行为）的固有限制，并非 bug，而是为语义化表格设计的默认保护机制。
要实现「列可拖拽至极窄宽度 + 内容自动截断 + 显示 ...」这一需求，关键在于解耦内容容器与表格单元格的尺寸绑定。核心思路是：将内容层脱离文档流，使其不再参与表格列宽计算。
✅ 正确实现方案
1. 启用绝对定位隔离内容
为每个单元格（th, td）设置 position: relative，并将其内部 .cell-container 设为 position: absolute，同时明确限定其宽高和溢出行为：
#my-table thead th,
#my-table tbody td {
position: relative;
height: 24px; /* 固定行高，避免高度塌陷 */
line-height: 24px; /* 垂直居中对齐 */
}
#my-table th div.cell-container,
#my-table td div.cell-container {
position: absolute;
top: 0;
left: 3px;
width: calc(100% - 6px); /* 留出左右 padding 空间 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
⚠️ 注意：
.cell-container必须脱离文档流（absolute），否则其内容仍会撑开父th/td，导致width设置失效。
2. 分离 resize 控件，避免被裁剪
将 .resize-bar 移出 .cell-container，直接置于 th 内部顶层（如示例中 <div class="cell-container">Text</div>
<span class="resize-bar"></span>）。这样它不会被 overflow: hidden 截断，且能准确响应鼠标事件。
3. 设置合理最小宽度与防塌陷
为表头添加 min-width（如 min-width: 50px），防止过度缩小导致 UI 异常；同时确保所有 th/td 具备明确 height 和 line-height，避免因字体渲染差异引发高度波动。
#my-table thead th {
min-width: 50px; /* 可拖拽的视觉下限 */
}
4. JavaScript 拖拽逻辑保持简洁有效
你已实现的 mousemove 中动态更新 currentTh.style.width 是完全可行的。只需确保：
-
currentTh是th元素本身（非其子元素）； - 避免频繁触发重排，当前写法已足够轻量；
- 可选增强：添加
resizeable状态防误触，或限制最小宽度（如Math.max(50, distanceMoved)）。
? 为什么 min-width/max-width 在表格中表现异常？
HTML 表格默认使用 table-layout: auto，此时列宽由内容决定，min-width 对 td/th 无效（仅对 table-layout: fixed 下的 col 或块级元素生效）。而 max-width 虽可设置，但若内容不可折行（white-space: nowrap），仍会被忽略。因此，必须通过绝对定位绕过表格布局引擎的内容度量逻辑。
✅ 最终效果验证
- 列可拖拽至任意小宽度（如 30px）；
- 文本自动截断并显示
...； - Resize 条始终可见、可点击；
- 表格结构稳定，无错位或换行。
? 替代方案说明：CSS Grid？
虽然 CSS Grid 更灵活且原生支持 minmax() 和 fr 单位，但若项目已依赖表格语义（如屏幕阅读器、数据导出、SEO）、或需兼容旧版浏览器，改造成本可能高于定位方案。本文方案零侵入 HTML 结构、纯 CSS/JS 实现、兼容 IE11+，是平衡可控性与兼容性的优选解。
✅ 小结：表格列强制缩放 ≠ 修改宽度属性，而是「让内容不参与宽度计算」。掌握
position: relative/absolute的父子尺寸解耦，是解锁高级表格交互的关键。
