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，且同时给<table> 设 <code>width（如width: 100%或具体像素值），否则 fixed 不激活 -
th/td的width只在第一行有效，后续行完全不参与计算 - 如果第一行有
colspan，该单元格的width仍会被用于列轨道分配，但会导致后续列错位——此时应改用<colgroup></colgroup> - 推荐写法：
<col style="width: 60px"> <col style="width: 20%">—— 像素和百分比混用会触发降级回auto -
<col>放在<tbody> 后面也生效，比内联 <code>width更鲁棒 - Firefox 和 Android WebView 对
<col>的支持远好于对th内联样式的解析 - 不要给
<col>加min-width或max-width，它们会覆盖width，尤其在 Firefox 中优先级更高 -
td必须加：white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - 外层容器（比如
<div class="table-wrapper">）必须设 <code>overflow-x: auto，否则横向滚动条出不来，用户看不到截断效果 - 避免把
td包在display: inline-table或flex容器里，会破坏表格渲染流，导致table-layout失效 - 对中文长串或 URL，
white-space: nowrap可能引发整行横向溢出；此时应换word-break: break-word+max-width，而非强求省略号
用 <colgroup></colgroup> 定义列宽最稳
<colgroup></colgroup> 在渲染前就确定列轨道，不受 DOM 顺序、colspan 或内容影响，是唯一能干净隔离盒模型干扰的方式。
text-overflow: ellipsis 在 td 上失效的真正原因
不是 CSS 写错了，而是三个前提缺一不可：表格启用 fixed 布局、列宽已由 <col> 或首行定义、td 自身满足截断条件。
立即学习“前端免费学习笔记（深入）”；
最容易被忽略的是：所有列宽控制都依赖 <table> 的显式 <code>width。没有它，table-layout: fixed 就是摆设，<col> 的 width 会失去参照基准，浏览器直接回退到 auto 模式。这点在响应式场景下尤其致命——width: 100% 看似简单，但如果父容器没设宽、或被 flex 压缩为 0，它就等于没写。
