真正能稳定生效的是结合 table-layout: fixed 和 colgroup+col 定义列宽；width 写在 td/th 上在现代浏览器中基本失效，因默认 table-layout: auto 下列宽由内容决定，且 html5 已废弃 width 属性。
直接在 <td> 或 <code><th> 上写 <code>width 属性，现代浏览器基本不认——它只在老式 HTML4 渲染模式下起作用，且优先级低、行为不可控。真正能稳定生效的，是结合 table-layout: fixed 和显式列宽定义。
为什么 width 写在 <td> 上经常失效
<p>浏览器默认用 <code>table-layout: auto，此时列宽由首行单元格内容决定，后续所有 width 声明（包括 <td width="120"> 或 <code>style="width: 120px"）都只是“建议”，内容一长就撑开，一短就塌缩。
<td width="120"> 是 HTML4 遗留写法，HTML5 中已废弃，Chrome/Firefox/Safari 全部静默忽略
<li>即使写 <code>style="width: 120px"，在 auto 布局下仍可能被内容覆盖，尤其当该列有长 URL 或无空格文本时- 多个
<td> 设不同 <code>width，浏览器会尝试“协调”列宽，结果往往不是你想要的固定值
colgroup + col 是唯一可靠路径
必须把列宽定义提前到表格结构最开始，用 <colgroup></colgroup> 包裹 <col>，每项对应一列，顺序不能错。这是语义正确、浏览器强制尊重的列宽声明方式。
-
<colgroup></colgroup> 必须是 <table> 的**直接子元素**，且必须在 <code><caption></caption>（如有）之后、<thead> 之前
<li>每个 <code><col> 只影响一列；span="3" 不会让三列都获得相同宽度，它只让该 <col> “覆盖逻辑位置”，样式仍只作用于起始列
- 必须用
style="width: 120px" 或 style="width: 20%"，width="120" 属性无效
- 百分比宽度基于
<table> 的最终宽度计算，所以 <code><table> 必须有明确宽度（如 <code>style="width: 100%" 或 style="width: 800px"）
table-layout: fixed 是开关，不是可选项
没有它，<col> 的宽度就是摆设。启用后，列宽完全由 <col> 或首行 <th>/</th>
<td> 的 <code>width 决定，不再扫描全表内容。
- 必须同时设置：
table { table-layout: fixed; width: 100%; } —— 缺一不可
- 某列没在
<col> 中声明宽度？Safari 下可能塌成 0px，建议显式写 <col style="width: auto"> 或最小值
- 内容超宽时会溢出，需配套加
td, th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
- 边框和 padding 会影响实际占用空间，建议统一加
box-sizing: border-box
最容易被忽略的是：哪怕你写了 <col style="width: 150px">，只要 <table> 没设 <code>table-layout: fixed，或者父容器宽度为 auto，那这个 150px 就只是个幻觉。
<td width="120"> 是 HTML4 遗留写法，HTML5 中已废弃，Chrome/Firefox/Safari 全部静默忽略
<li>即使写 <code>style="width: 120px"，在 auto 布局下仍可能被内容覆盖，尤其当该列有长 URL 或无空格文本时<td> 设不同 <code>width，浏览器会尝试“协调”列宽，结果往往不是你想要的固定值
colgroup + col 是唯一可靠路径
必须把列宽定义提前到表格结构最开始，用 <colgroup></colgroup> 包裹 <col>，每项对应一列，顺序不能错。这是语义正确、浏览器强制尊重的列宽声明方式。
-
<colgroup></colgroup>必须是<table> 的**直接子元素**，且必须在 <code><caption></caption>（如有）之后、<thead> 之前 <li>每个 <code><col>只影响一列；span="3"不会让三列都获得相同宽度，它只让该<col>“覆盖逻辑位置”，样式仍只作用于起始列 - 必须用
style="width: 120px"或style="width: 20%"，width="120"属性无效 - 百分比宽度基于
<table> 的最终宽度计算，所以 <code><table> 必须有明确宽度（如 <code>style="width: 100%"或style="width: 800px"）table-layout: fixed是开关，不是可选项没有它，
<col>的宽度就是摆设。启用后，列宽完全由<col>或首行<th>/</th> <td> 的 <code>width决定，不再扫描全表内容。- 必须同时设置：
table { table-layout: fixed; width: 100%; }—— 缺一不可 - 某列没在
<col>中声明宽度？Safari 下可能塌成 0px，建议显式写<col style="width: auto">或最小值 - 内容超宽时会溢出，需配套加
td, th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } - 边框和 padding 会影响实际占用空间，建议统一加
box-sizing: border-box
最容易被忽略的是：哪怕你写了
<col style="width: 150px">，只要<table> 没设 <code>table-layout: fixed，或者父容器宽度为auto，那这个 150px 就只是个幻觉。 - 必须同时设置：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
