width属性常失效是因为table默认为auto布局，需先设table-layout: fixed，再通过或首行单元格设置宽度才生效；支持px/%/em但不支持fr/calc()，且需置于前、首行必须有内容。
table 设置列宽为什么 width 属性经常失效
因为 table 的默认布局是 table-layout: auto，浏览器会根据内容自动分配列宽，此时直接给 <td> 或 <code><th> 设 <code>width（无论是内联还是 CSS）大概率被忽略。
真正起效的前提是：先让表格进入「固定布局模式」。
- 必须在
<table> 上显式设置 <code>table-layout: fixed - 列宽控制权就从内容转移到
<col>或第一行<th>/</th> <td> 上<li>后续再对 <code><col>或单元格设width才会稳定生效
用 <col> 标签精准控制每列宽度
<col> 是唯一专为列样式设计的语义化标签，它不渲染内容，但能统一影响整列，且优先级高于单元格上的 width。
常见写法：
立即学习“前端免费学习笔记（深入）”；
<table style="table-layout: fixed; width: 100%;"> <col style="width: 80px;"> <col style="width: 200px;"> <col style="width: 1fr;"> <!-- 注意：CSS Grid 单位在 <col> 中无效 --> <tr><th>序号</th><th>姓名</th><th>备注</th></tr> <tr><td>1</td><td>张三</td><td>长期合作</td></tr> </table>
-
<col>必须放在<table> 开始后、<code><thead> 或 <code><tr> 之前<li>只支持像素（<code>px）、百分比（%）、em等绝对/相对长度单位，不支持fr、minmax()等 Grid 特性 - 如果列数多于
<col>数量，多余列按剩余空间均分 - 想防文字溢出：得配合
overflow: hidden+text-overflow: ellipsis+white-space: nowrap在<td> 上<li>想让某列「最小不小于 100px，但最多占 30%」：只能用 <code><col>设width: 100px，再用 JS 动态计算百分比并重设 —— CSS 原生不支持列宽区间约束 - 移动端适配时，
width: 100%在<col>中表现不稳定，建议改用固定像素或视口单位（如width: 10vw） - IE 下若第一行
<th> 缺失或为空，<code><col>宽度可能完全不生效，必须确保首行有真实内容或至少空<th> <li>Safari 12 之前不支持在 <code><col>上用calc()，例如width: calc(100% - 200px)会被忽略 - 所有浏览器中，
<col>的background-color只在 Chrome/Firefox 中显示为列背景，Safari/Edge 不支持 —— 别指望它做隔列着色
CSS 控制列宽时 min-width 和 max-width 的行为差异
当使用 table-layout: fixed 后，width 是目标宽度，但内容超长仍可能撑开——这时靠 min-width/max-width 并不能直接约束列，它们只对单元格盒子本身起作用，而列宽由 <col> 或首行单元格决定。
IE 和旧版 Safari 对 table-layout: fixed 的兼容细节
IE8+ 和 Safari 5.1+ 支持 table-layout: fixed，但有隐藏坑：
最稳妥的做法：始终用 <col> 配合 table-layout: fixed，首行写满 <th>，宽度全用像素或百分比，避免依赖动态计算和视觉装饰。</th>
