table-layout: fixed 是唯一能真正锁定列宽的方案，需配合 table 显式 width 和 colgroup 使用；th/td 的 width 在 auto 模式下仅作建议，易被内容撑开；col 元素最稳定，但需避免混用单位及 min/max-width；ellipsis 截断需 fixed 布局、列宽定义和 td 样式三者齐备。

table-layout: fixed 是唯一能绕过盒模型干扰、真正锁定列宽的方案。其他所有 width 设置（包括 th、td 上的 width）在默认 table-layout: auto 下，都会被内容撑开，根本不是“没生效”，而是压根没机会生效。

为什么 th 和 td 的 width 不起作用

浏览器在 table-layout: auto 模式下，会先测量所有单元格内容宽度，再反推列宽；width 属性只当“建议值”，尤其遇到长 URL、中文无空格串或未设 white-space 时，立刻被忽略。

• 必须显式设置 table-layout: fixed，且同时给 设 width（如 width: 100% 或具体像素值），否则 fixed 不激活
  th/td 的 width 只在第一行有效，后续行完全不参与计算
  如果第一行有 colspan，该单元格的 width 仍会被用于列轨道分配，但会导致后续列错位——此时应改用

  用

  定义列宽最稳
  在渲染前就确定列轨道，不受 DOM 顺序、colspan 或内容影响，是唯一能干净隔离盒模型干扰的方式。
  

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

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

  下载
  • 推荐写法：
  —— 像素和百分比混用会触发降级回 auto
  放在 后面也生效，比内联 width 更鲁棒
  Firefox 和 Android WebView 对
  的支持远好于对 th 内联样式的解析
  不要给
  加 min-width 或 max-width，它们会覆盖 width，尤其在 Firefox 中优先级更高

  text-overflow: ellipsis 在 td 上失效的真正原因

  不是 CSS 写错了，而是三个前提缺一不可：表格启用 fixed 布局、列宽已由

  或首行定义、td 自身满足截断条件。
  • td 必须加：white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  • 外层容器（比如
    ）必须设 overflow-x: auto，否则横向滚动条出不来，用户看不到截断效果
  • 避免把 td 包在 display: inline-table 或 flex 容器里，会破坏表格渲染流，导致 table-layout 失效
  • 对中文长串或 URL，white-space: nowrap 可能引发整行横向溢出；此时应换 word-break: break-word + max-width，而非强求省略号

  最容易被忽略的是：所有列宽控制都依赖

  的显式 width。没有它，table-layout: fixed 就是摆设， 的 width 会失去参照基准，浏览器直接回退到 auto 模式。这点在响应式场景下尤其致命——width: 100% 看似简单，但如果父容器没设宽、或被 flex 压缩为 0，它就等于没写。