<col width="30%">在现代浏览器中基本无效，因HTML5已废弃该属性；必须改用<col style="width: 30%">并配合table-layout: fixed和<table>明确宽度（如width: 100%）才能生效。
直接写 <col width="30%"> 或只给 <table> 加 width: 100%，列宽大概率不按预期生效——这不是你漏写了单位或拼错了标签，而是浏览器根本没把它当真。
为什么 width="30%" 在 <col> 上基本无效
HTML5 已将 <col> 的 width 属性标记为 obsolete（已过时），Chrome、Firefox、Safari 均不再用它参与布局计算。你看到的“似乎有点效果”，往往是残留兼容逻辑或打印样式路径的偶然行为，不能依赖。
-
<col width="30%">是 HTML 属性，现代浏览器忽略它 - 真正起作用的是 CSS 的
style="width: 30%;"，且必须配合table-layout: fixed - 即使写了
width="30%"，也绝不会影响后续行的<td>宽度，因为<col>的语义作用范围仅限于列级布局，不继承、不传播
table-layout: fixed 是百分比列宽的前提条件
没有 table-layout: fixed，<col> 上的 CSS width 就像没插电的开关——看着在，按了没反应。浏览器默认用 auto 模式，按内容撑开列宽，百分比声明会被直接跳过。
- 必须同时设置：
<table style="width: 100%; table-layout: fixed;"> -
width: 100%的参照是父容器，如果父容器没明确宽度（比如<div>没设width或max-width），这个百分比就失去意义 - 启用
fixed后，列宽只由第一行（或<col>）定义，后续行的<td>宽度声明会被忽略
正确写法：用 <col> + CSS width，位置和单位都不能错
<col> 必须紧贴 <table> 开始标签后、<thead> 前；单位只认 %、px、em，不支持 fr 或 calc()；所有列宽之和不必等于 100%，浏览器会按比例重算，但设成 100% 更易预测结果。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确结构：
<table style="width: 100%; table-layout: fixed;"> <col style="width: 25%;"> <col style="width: 50%;"> <col style="width: 25%;"> <thead><tr><th>A</th><th>B</th><th>C</th></tr></thead> <tbody><tr><td>x</td><td>y</td><td>z</td></tr></tbody> </table>
- ❌ 错误写法：
<thead><col></thead>（位置错）、<col width="30%">（用 HTML 属性）、<col style="width: 1fr;">（单位不支持） - ⚠️ 第一行
<th>或<td>不要再设width，否则会覆盖<col>定义
内容溢出时，width 只是起点，还得配 white-space 和 overflow
table-layout: fixed 锁定了列宽，但长 URL、连续无空格英文、未约束的图片仍会撑破单元格或导致横向滚动。单靠 width 无法控制视觉表现。
- 单行截断：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - 自动换行：
word-break: break-word;或overflow-wrap: break-word;，并确保white-space: normal; - 图片破坏列宽：
img { max-width: 100%; height: auto; } - 边框和 padding 影响总宽：
box-sizing: border-box;让width包含它们
最容易被卡住的不是怎么写百分比，而是三个隐性前提：父容器有没有可计算宽度、table-layout: fixed 漏没漏、<col> 放没放在正确位置——这三个点一错，后面所有样式都白调。
