table-layout: fixed是唯一真正固定列宽的CSS方式，但必须同时满足：table有明确width、col为直接子元素且位置正确、col数量与列数一致且带width值。

table-layout: fixed 是控制列宽的硬开关，不加它，所有列宽设置都只是“建议”，浏览器照常按内容撑开。真要固定列宽，必须同时满足三个条件：表格有明确宽度、列宽来源已声明、文本溢出行为被显式约束。

为什么 table-layout: fixed 加了也没用？

常见错误是只写了 table-layout: fixed，却漏掉另外两个必要条件：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• table 元素没设 width（比如 width: 100% 或 width: 800px），浏览器无基准可算列宽
• 没用 <col> 或第一行 <th>/</th> <td> 的 <code>style="width: ..." 声明列宽；<col width="120"> 这种 HTML 属性已被现代浏览器静默忽略
• 父容器是 display: inline、未设宽的 flex 容器，或 body 这类无约束上下文，导致百分比失效

怎么用 <col> 正确声明列宽？

<col> 是唯一能跨整列统一控制宽度的语义元素，但位置和写法错一点就全白搭：

• 必须是 <table> 的**直接子元素**，且在 <code><caption></caption>（如有）之后、<thead> 之前 <li>每个 <code><col> 按顺序对应一列，5 列就得写 5 个，不能靠 span 偷懒
• 必须用 CSS style 设置宽度，例如 <col style="width: 120px"> 或 <col style="width: 25%">；width="25%" 是 HTML 属性，无效
• 百分比值只在 table 有明确宽度时才可计算，比如 width: 100% 或 width: 600px

内容太长撑破列宽怎么办？

table-layout: fixed 锁定了列宽，但不等于锁住了内容渲染行为。长文本、URL、连续英文仍会换行异常或溢出：

• 单行截断：给 <td> 和 <code><th> 加 <code>white-space: nowrap; overflow: hidden; text-overflow: ellipsis;（注意需配合 display: block 或 inline-block 才生效）
• 自动换行：用 word-break: break-word; 或 overflow-wrap: break-word;，同时确保 white-space: normal;
• 图片破坏列宽：img { max-width: 100%; height: auto; }
• 边框和 padding 影响实际占用：全局加 box-sizing: border-box; 更可控

想让某列固定、其余自适应，怎么配？

最可靠组合是 <col> + table-layout: fixed，优先级清晰，不依赖内容：

立即学习“前端免费学习笔记（深入）”；

• 固定像素列：<col style="width: 120px">
• 自适应列：<col>（空标签）或 <col style="width: auto">；Safari 下 auto 可能塌缩为 0，建议补 min-width: 0
• 混合单位慎用：比如 120px + 30% + auto，fixed 布局下可能导致剩余空间分配异常
• 列宽总和不必等于 100%，浏览器会按比例缩放；但设成 100% 更易预期结果
真正容易被忽略的不是怎么写 width，而是父容器有没有宽度、table-layout 漏没漏、<col> 放错了位置——这三个点卡住，再细的样式也白搭。