table-layout: fixed 是解决列宽错乱的前置条件，需配合显式 width 和 col 元素控制列宽；浮动不适用于 td/th，仅可用于 table 整体实现文字环绕；现代替代方案是 flex 布局。
table-layout: fixed 是解决列宽错乱的前置条件
浮动（float）本身不适用于 table 元素及其直接子元素（如 tr、td），强行对 td 使用 float 会破坏表格渲染流，导致列宽计算失效、内容溢出或错位。真正可控的列宽管理必须从 table-layout 入手：table-layout: fixed 让浏览器按 HTML 中第一行 tr 的 td/th 宽度（或 col 定义）确定各列基准宽度，后续行不再参与重算。
常见错误是只加 float: left 而忽略 table-layout，结果列宽仍随内容伸缩，浮动反而加剧错乱。
- 必须给
table设置table-layout: fixed -
width也要显式声明（如width: 100%或具体像素值），否则fixed模式可能退化 - 列宽优先通过
col元素控制（比在td上设width更稳定）
浮动不是用来布局表格列的，而是处理表格容器外的环绕场景
如果你实际想实现的是「表格左浮动，文字环绕其右侧」这类排版，那 float 应作用于整个 table 元素，而非内部单元格。此时列宽错乱往往源于浮动后容器宽度塌陷或父级未清除浮动，和表格内部结构无关。
示例场景：文章中插入一个窄表格，希望正文文字沿其右侧流动。
立即学习“前端免费学习笔记（深入）”；
- 对
table设置float: left+margin-right: 1em - 确保父容器有足够宽度容纳浮动表 + 文字流，否则文字会换行到下一行
- 若后续内容错位，检查是否遗漏
clear: both或 BFC 触发（如overflow: hidden） - 不要对
td或th设float—— 浏览器会忽略或引发渲染异常
当真需要“伪浮动列”时，用 flex 替代 float + table
如果业务需求本质是「让某些列固定、其余列自适应，并支持横向滚动或溢出隐藏」，那传统表格已不适合。现代方案是放弃 table 标签，改用语义化 div + display: flex，配合 min-width 和 flex-shrink 控制列行为。
例如三列布局：首列固定 120px，末列固定 80px，中间列填满剩余空间：
.row {
display: flex;
}
.col-fixed-left { width: 120px; }
.col-fill { flex: 1; min-width: 0; } /* 防止内容撑宽 */
.col-fixed-right { width: 80px; }
- 这种结构完全规避了
table-layout的限制和float对表格的不兼容 - 支持响应式（如用
flex-wrap换行）、滚动（overflow-x: auto包裹） - 若需表格语义，可用
role="table"等 ARIA 属性补足可访问性
容易被忽略的兼容性细节
table-layout: fixed 在所有现代浏览器中表现一致，但有两个隐性陷阱：
-
white-space: nowrap若设在td上，会阻止文本折行，导致内容溢出列宽 —— 应搭配overflow: hidden和text-overflow: ellipsis（注意需同时设display: block） - 使用
colgroup+col定义宽度时，IE 对百分比宽度的支持较弱，建议用像素或视口单位 - 如果表格内嵌了
inline-block元素或设置了vertical-align，可能影响行高计算，间接干扰列宽视觉对齐
浮动和表格列宽本就不该混用；问题根源通常不在「怎么让 float 生效」，而在于是否选对了布局模型。
