table-layout: fixed 是使百分比列宽生效的前提，需配合 table 宽度和父容器明确宽度，且优先使用 <col> 设置 width 样式而非单元格内联样式。
table-layout: fixed 是百分比列宽生效的前提
不加 table-layout: fixed，width: 30% 在 <col> 或 <th> 上基本无效——浏览器会按内容自动撑开列宽，百分比被忽略。这不是写法错，而是布局模式没切换。
必须同时满足：
-
<table>上设置style="table-layout: fixed; width: 100%;" - 父容器有明确宽度（如
div设了width: 800px或max-width: 100%） - 避免在第一行
<th>或<td>上再设width，否则会覆盖<col>定义
用 <col> 设置百分比宽度最稳定
<col> 是专为列级控制设计的语义元素，优先级高于单元格上的任何 width 声明，且不受首行是否合并、是否渲染完成影响。
正确写法：
立即学习“前端免费学习笔记（深入）”；
-
<col>必须紧接在<table>开始标签后、<thead>前 - 用
style="width: 30%;"，不是 HTML 属性width="30%"（后者已废弃） - 所有
<col>的百分比之和不必等于 100%，浏览器会按比例重分配；但设为 100% 更易预期结果 - 不支持
fr单位，只认%、px、em
示例：
<table style="table-layout: fixed; width: 100%;"> <col style="width: 25%;"> <col style="width: 35%;"> <col style="width: 40%;"> <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>
第一行含 colspan 时，<col> 是唯一可靠方案
当 <tr> 中有 colspan="2" 这类合并单元格，table-layout: fixed 会以第一行为基准计算列数。如果第一行只有 2 个 <th> 但实际要 4 列，浏览器就“以为”只有 2 列，后续列宽直接坍缩或均分。
此时必须显式声明全部列：
- 在
<table>后立刻写够数量的<col>（比如 4 列就写 4 个） - 哪怕第一行只渲染了 2 个单元格，
<col>仍强制定义物理列结构 - 不要指望靠
<th style="width: 60%">拉伸合并单元格来间接控制其他列
移动端或复杂表头下，<col> 容易失效的几个信号
遇到这些情况，<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> 语义，但宽度控制确定性强得多。
