加了table-layout:fixed后列宽变平均，是因为其列宽仅由第一行或元素决定，后续行的width声明被忽略；若第一行含colspan，则跨列均分宽度，且表格必须设置明确width值，否则百分比失效。

table-layout: fixed 确实能解决内容撑开列宽的问题，但直接加它，反而常让列宽“更失控”——因为它的列宽只认第一行或 <col>，后面所有 width 声明都会被忽略。

为什么加了 table-layout: fixed 后列宽变平均了

浏览器在 fixed 模式下只扫描第一行（或 <col>）来确定每列宽度，后续行的 width、colspan 都不影响列宽分配。一旦第一行有 colspan，比如 <td colspan="2">，那它占的两列就会被均分；如果第一行没显式设宽，所有列就按等宽处理。<ul> <li>第一行含 <code>colspan → 被跨的列宽被平均分配，你后边写的 width: 30% 全无效

没给 <table> 设 <code>width → 百分比失去参照，列宽计算退化为自动均分

用 th/td 写 width 却没放在第一行 → 完全不被读取

必须用 <col> 或隐藏首行来定义列宽

可靠方式只有两种：用 <col> 元素（语义清晰、兼容性好），或用一个不可见但参与布局的首行（适合动态生成表格）。

• <col> 必须放在 <tbody> 前、<code><thead> 后（或直接在 <code><table> 开头），例如：<pre class="brush:php;toolbar:false;"></pre> <table style="table-layout: fixed; width: 100%;"> <col style="width: 60%"> <col style="width: 20%"> <col style="width: 20%"> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> </table> <li>隐藏首行要确保它参与渲染（不能用 <code>display: none），推荐：height: 0; font-size: 0; line-height: 0; border: 0;，且该行 <th> 或 <code><td> 必须带 <code>width

  文本溢出和换行必须手动配，fixed 不自动处理

  table-layout: fixed 只管列宽，不管内容怎么塞进去。长 URL、无空格字符串会直接撑破单元格或触发横向滚动。

  

  CSS婚礼策划服务机构宣传网站模板

  CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

  下载
  • 强制换行：word-break: break-all; 或 word-wrap: break-word;（后者已废弃，优先用前者）
  • 单行截断：white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  • 避免同时设 min-width/max-width 和百分比 —— 它们会冲突，导致列宽计算异常

  最易被忽略的一点：所有列宽控制都依赖于表格容器本身有明确宽度（width: 100% 或具体像素值），否则 table-layout: fixed 会退化成行为不可预测的 fallback 模式。父容器如果是 flex 或 inline 元素，务必检查它是否“漏掉”了宽度约束。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！