真正固定列宽必须配合 table-layout: fixed 和 colgroup + col 显式定义，否则 width 仅作最大宽度参考，内容仍会撑开或压缩列宽。
直接设 table { width: 600px; } 不够，宽度会因内容撑开或缩放失真；真正固定列宽必须配合 table-layout: fixed 和显式列定义。
为什么单纯写 width 不生效
浏览器默认用 table-layout: auto，它先按内容算列宽，再把整张表缩放到你写的 width 值——结果就是文字换行、列宽忽大忽小、td 的 width 被忽略。哪怕写了 <td width="100">，也只在首行生效，且优先级低于 <code><col>。
-
table上的width在 auto 模式下只是“最大可用宽度”，不是强制约束 - 长文本（如无空格 URL）会直接突破设定列宽，导致横向滚动或溢出
- 百分比总和超过 100% 时，所有列会按比例压缩，而非截断
用 colgroup + col 精确控制每列像素宽度
这是唯一能稳定实现“某列死死卡在 120px”的方式，<col> 必须紧贴 <table> 开始后、<code><thead> 前，顺序不能错。
<ul>
<li>写法：<code><col width="120">
<col width="200">
<col> —— 未设 width 的 <col> 会均分剩余空间
<col style="width: 80px"> 和 <col width="80"> 效果一致，但前者更易与 CSS 变量/媒体查询联动<col> 宽度加起来超过 table 总宽？浏览器会等比缩小各列，不会留空白也不会截断必须开启 table-layout: fixed
不加这句，<col> 就是摆设。它让表格放弃内容测量，完全按你定义的列宽渲染，首行单元格内容不再影响后续行。
- 样式写法：
table { table-layout: fixed; width: 600px; } - 如果没设
width，table-layout: fixed会按内容最小宽度撑开，失去“固定”意义 - IE8+ 全支持，现代项目可放心用
文字溢出和响应式要注意什么
固定像素列宽下，长文本默认会撑破单元格。需要主动截断，且移动端容易触发横向滚动。
- 单行截断必备：
td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - 移动端慎用纯 px：改用
min-width: 80px; width: 20%组合，或用媒体查询切换为display: block堆叠布局 - 别依赖
word-break: break-all——它会在任意位置断词，中文体验极差；优先用overflow-wrap: break-word
最易被忽略的是 <colgroup></colgroup> 的位置和 table-layout: fixed 的绑定关系：漏掉任一，像素宽度就不可控。实际写的时候，先把 table 样式和 <colgroup></colgroup> 结构敲定，再调单元格样式，顺序错了调试成本很高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
