col元素不支持min-width样式，必须将min-width设在第一行th或td上并配合table-layout:fixed；col仅响应width属性，且需与列数严格匹配、位置正确。
col 元素不支持 min-width 样式
<col> 是纯结构化标签，只响应 width（CSS 属性），不接受 min-width、max-width 或任何内容相关样式。哪怕你写 <col style="min-width: 120px">，浏览器会完全忽略它——这不是 bug，是规范行为（HTML5 明确限定 <col> 只参与列宽分配，不参与盒模型约束）。
常见错误现象：<col style="min-width: 150px"> 看似生效，实则是后续 td 的 min-width 在起作用，<col> 本身没参与。
-
<col>必须放在<colgroup></colgroup>内，且是<table> 的直接子元素（<code><caption></caption>后、<thead> 前） <li>多个 <code><col>必须与表格实际列数严格匹配，少一个，最后一列就失控 -
span属性不“广播”宽度：<col span="2" style="width: 200px">只影响第 1 列，第 2 列仍按默认逻辑算
真正起效的最小宽度控制必须落在 td/th 上
要让最小宽度可依赖，得把 min-width 写在第一行的 <th> 或 <code><td> 上，并配合 <code>table-layout: fixed。此时浏览器才按首行尺寸分配列宽，min-width 才成为底线。
示例写法：
table { table-layout: fixed; width: 100%; }
th:first-child, td:first-child { min-width: 120px; }
th:nth-child(2), td:nth-child(2) { min-width: 80px; }
- 只设
min-width不够稳定：某些浏览器下仍可能松动，建议同时加width（如width: 150px或width: 20%） - 长文本需配合
white-space: nowrap和overflow: hidden，否则溢出会破坏宽度约束 - IE8–IE11 对该组合支持极差，即使加了
table-layout: fixed也不稳定
更可靠的做法：用
把 <col> 当作列宽基准，把 td/th 的 min-width 当作兜底。这样既利用 <col> 的稳定性，又保留弹性空间。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
示例：
| 姓名 | 部门 | 备注 |
|---|---|---|
| 张三 | 前端 | 长期维护 |
CSS 配套：
table { table-layout: fixed; width: 100%; }
td:nth-child(3), th:nth-child(3) { min-width: 200px; }
-
<col>的width会覆盖所有对应列的min-width和内容宽度，所以第三列没设width，才轮到min-width发挥作用 - 若某列需“弹性但有底线”，可用
width: 120px+ 后续td加min-width: 120px，双重保障 - 不要试图用 CSS 选中
col并设min-width，它不响应这类样式（2026年8月4日验证）
嵌套在 overflow-x: auto 容器里的表格特别容易失效
当表格被包在 overflow-x: auto 的容器里时，父容器的宽度计算常不明确，导致 table-layout: fixed 下的百分比 width 或 min-width 失效——尤其在移动端或动态加载场景。
- 确保
<table> 有明确宽度（如 <code>width: 100%或固定像素值），否则min-width: 15%这类写法会因父容器无宽而退化 -
white-space: nowrap或text-overflow: ellipsis会干扰宽度计算，让min-width更难起效 - 如果列内容差异极大（比如一列全是短数字，另一列是长 URL），优先用
<col>控制，别只靠td的min-width
复杂点在于：表格渲染机制本身不把 min-width 当作有效约束，它只是盒模型里的一个“建议值”。真正可控的，永远是 <col> 的 width 和首行单元格的显式尺寸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
