table-layout: fixed 是使百分比列宽生效的前提，需配合 table 宽度和父容器明确宽度，且优先使用 设置 width 样式而非单元格内联样式。
table-layout: fixed 是百分比列宽生效的前提
不加 table-layout: fixed，width: 30% 在 <col> 或 <th> 上基本无效——浏览器会按内容自动撑开列宽，百分比被忽略。这不是写法错，而是布局模式没切换。
<p>必须同时满足：</p>
<ul><li><code><table> 上设置 <code>style="table-layout: fixed; width: 100%;"
div 设了 width: 800px 或 max-width: 100%）<th> 或 <code><td> 上再设 <code>width，否则会覆盖 <col> 定义
用
<col> 是专为列级控制设计的语义元素，优先级高于单元格上的任何 width 声明，且不受首行是否合并、是否渲染完成影响。
正确写法：
-
<col>必须紧接在<table> 开始标签后、<code><thead> 前 <li>用 <code>style="width: 30%;"，不是 HTML 属性width="30%"（后者已废弃） - 所有
<col>的百分比之和不必等于 100%，浏览器会按比例重分配；但设为 100% 更易预期结果 - 不支持
fr单位，只认%、px、em
示例：
| A | B | C |
|---|---|---|
| x | y | z |
第一行含 colspan 时，
当 <tr> 中有 <code>colspan="2" 这类合并单元格，table-layout: fixed 会以第一行为基准计算列数。如果第一行只有 2 个 <th> 但实际要 4 列，浏览器就“以为”只有 2 列，后续列宽直接坍缩或均分。
<p>此时必须显式声明全部列：</p>
<ul><li>在 <code><table> 后立刻写够数量的 <code><col>（比如 4 列就写 4 个）
<col> 仍强制定义物理列结构<th style="width: 60%"> 拉伸合并单元格来间接控制其他列
<h3>移动端或复杂表头下，<col> 容易失效的几个信号</h3>
<p>遇到这些情况，<code><col> + table-layout: fixed 可能表现不稳定：
- 表格嵌套在 flex/grid 容器中，且父容器未设明确
width - 使用了
word-break: break-all或white-space: nowrap，但没配overflow: hidden - 列内文本极长且无空格，又没设
min-width或max-width - 动态插入行后未重置列宽（
<col>不响应 DOM 变更）
真遇到这些，与其反复调试 <col>，不如放弃语义化表格，改用 display: grid 模拟列结构——虽然脱离了 <table> 语义，但宽度控制确定性强得多。</table>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
