html5已废弃col的width属性，现代浏览器仅作兼容解析且行为不可靠；应改用css的style="width: 120px"配合table-layout: fixed实现稳定列宽控制。
col 的 width 属性在现代浏览器中基本不生效
直接写 <col width="30%"> 无法可靠控制列宽——这不是你代码写错了，而是 HTML 规范和浏览器实现早已弱化甚至忽略该属性。HTML5 明确将 width 标记为“已过时（obsolete）”，Chrome、Firefox、Safari 均不再将其作为布局依据，仅可能影响打印样式或极少数遗留渲染路径。
用 CSS table-layout: fixed + col 配合 width 才能真正生效
想让 <col> 的宽度声明起作用，必须同时满足两个条件：表格启用固定布局，且 <col> 上设置 CSS width（不是 HTML width 属性）。HTML 的 width 属性在这里完全无效，必须转为 CSS。
- 给
<table> 添加 <code>style="table-layout: fixed; width: 100%;" - 为每个
<col>设置style="width: 30%;"（注意：这里用的是 CSSwidth，不是 HTML 属性） - 第一行
<tr> 中的 <code><th> 或 <code><td> 不应设置宽度，否则会覆盖 <code>col定义 - 所有列宽之和不必等于 100%，浏览器会按比例重新分配；但设为 100% 更易预期结果
| A | B | C |
|---|---|---|
| x | y | z |
不用 col 也能实现百分比列宽，但行为更可控
如果只是要百分比列宽，直接对 <th> 或 <code><td> 设置 CSS <code>width 更简单，尤其当列内容长度差异大、需要内容撑开时：
-
table-layout: auto（默认）下，<th> 的 <code>width: 30%是最小宽度建议，实际宽度由内容决定 -
table-layout: fixed下，<th> 的 <code>width会严格生效，但长文本可能溢出或截断，需配合overflow: hidden或white-space: nowrap - 响应式场景中，
min-width和max-width比单纯width更实用 - 表格有
<colgroup></colgroup>嵌套或重复定义，浏览器解析混乱 <thead> 中使用 <code>colspan/rowspan，导致列结构与<col>数量不匹配- 父容器设置了
overflow-x: auto且未约束表格最小宽度，触发内部重排 - CSS 框架（如 Bootstrap）全局重置了
table样式，覆盖了table-layout
移动端或复杂表头时，col 容易失效的几个典型场景
<col> 在以下情况几乎必然被忽略，即使加了 table-layout: fixed：
这时候最稳的做法是放弃 <col>，改用 grid 或 display: table-cell 手动模拟表格行为——虽然偏离语义化，但宽度控制确定性强。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
