HTML5废弃td的width属性，应改用table-layout:fixed配合col或table宽度控制列宽，且必须同时设置table总宽与fixed布局，否则width无效。
width="50%" 这种写法为什么失效了
HTML5 明确废弃了 td 的 width 属性（包括像素和百分比），浏览器虽仍可能兼容渲染，但校验失败、语义混乱、响应式行为不可控。比如 <td width="30%"> 在现代项目中属于无效 HTML，且在 Flex/Grid 布局下完全被忽略。
用 table-layout: fixed + width 控制列宽最稳妥
这是替代 width 属性最直接、兼容性最好、行为最可预测的方式。关键在于两步配合：
- 给
table设置table-layout: fixed（否则width会被自动重算） - 给
col或td/th设置width（支持%、px、fr等，但 % 在 fixed 布局下按容器宽度比例分配） - 必须定义
table的总宽（如width: 100%），否则百分比无参照
示例：
<table style="width: 100%; table-layout: fixed;"> <col style="width: 20%;"> <col style="width: 30%;"> <col style="width: 50%;"> <tr><td>A</td><td>B</td><td>C</td></tr> </table>
用 colgroup + col 比直接写 td 更优雅
把列宽定义集中到 <colgroup>，语义清晰、维护方便、避免重复写样式。尤其适合多行表格，且 col 支持 span 合并列宽。
立即学习“前端免费学习笔记（深入）”；
-
col元素不占文档流，纯用于定义列样式，不影响内容结构 - 不能在
col上写background或border（IE/Edge 旧版除外），要设背景得用td或tbody - 百分比宽度在
table-layout: fixed下才严格生效；auto布局下会退化为内容撑开
别这么写：<td style="width: 40%"> —— 多行时冗余，难统一。
响应式场景下慎用百分比，优先考虑 min-width 或 fr
纯百分比在小屏上容易导致文字换行错乱或内容溢出。真正需要“弹性列”时，table 不是最佳选择，但若必须用，可结合：
-
min-width防止列过窄（如min-width: 120px） - 用
vw单位替代%（如width: 25vw），更可控 - 现代方案：用
display: grid模拟表格布局，彻底摆脱table-layout限制（但需放弃语义化table标签）
注意：fr 单位只在 Grid 中有效，table 里不识别 —— 别往 col 里写 width: 1fr，它不会生效。
实际项目里最容易被忽略的是 table-layout: fixed 和 table 自身宽度的配套设置，漏掉任何一个，width 就形同虚设。
